उदाहरणों के साथ। यदि आप रिएक्ट सीखना शुरू कर रहे हैं या पहले से ही इस लाइब्रेरी का उपयोग करने में कुछ समय है, तो निश्चित रूप से, आप एसिंक्रोनस फ़ंक्शंस से संबंधित कुछ त्रुटियों या चेतावनियों में आए हैं, विशेष रूप से हुक का उपयोग करके। useEffect जब मैं इस हुक की कार्यक्षमता सीख रहा था, तो मैं इस फ़ंक्शन में वापसी का उपयोग करने का कारण नहीं समझ सका क्योंकि ज्यादातर मामलों में इसका उपयोग करना आवश्यक नहीं है, और इसके बिना रिएक्ट पूरी तरह से अच्छी तरह से काम करता है। जैसे-जैसे मैं रिएक्ट के काम करने के तरीके और घटकों के जीवन चक्र से अधिक परिचित होता गया, मैंने नोटिस करना शुरू किया कि कई मामलों में, विशेष रूप से साइड इफेक्ट में, हुक में रिटर्न का उपयोग करना बहुत महत्वपूर्ण है। useEffect इसके क्या - क्या दुष्प्रभाव हैं? एक साइड इफेक्ट एक दूरस्थ सर्वर से डेटा प्राप्त करना, स्थानीय भंडारण को पढ़ना या लिखना, ईवेंट श्रोताओं को स्थापित करना या सदस्यता स्थापित करना हो सकता है। ये साइड इफेक्ट तब हो सकते हैं जब एक बटन क्लिक किया जाता है, एक फॉर्म सबमिट किया जाता है, या जब एक घटक को माउंट और अनमाउंट किया जाता है। रिएक्ट का हुक कार्यात्मक घटकों को कुछ करने की अनुमति देता है जब एक घटक माउंट किया जाता है या जब कुछ गुण या राज्य बदलते हैं। यह हुक घटक के अनमाउंट होने पर भी सफाई की अनुमति देता है। useEffect साइड इफेक्ट क्यों साफ करें? रिएक्ट में साइड इफेक्ट्स को हैंडल करना मध्यम जटिलता का काम है। हालाँकि, समय-समय पर, आपको घटक जीवनचक्र (प्रारंभिक रेंडरिंग, असेंबली, उपयोग, डिसअसेंबली) और साइड-इफ़ेक्ट जीवनचक्र (शुरू, प्रगति पर, पूर्ण) के चौराहे पर कठिनाइयाँ हो सकती हैं। ऐसी ही एक कठिनाई तब होती है जब एक साइड इफेक्ट पूरा हो जाता है और पहले से ही अलग किए गए घटक की स्थिति को अपडेट करने का प्रयास करता है। यह इस तरह की प्रतिक्रिया चेतावनी का कारण बनता है: रिएक्ट एप्लिकेशन में मेमोरी लीक मुख्य रूप से घटक के अनमाउंट होने से पहले एक घटक को माउंट किए जाने पर किए गए सब्सक्रिप्शन को रद्द नहीं करने का परिणाम है। वे कई समस्याएं पैदा करते हैं, जिनमें शामिल हैं: उपलब्ध स्मृति की मात्रा को कम करके परियोजना के प्रदर्शन को प्रभावित करता है। एप्लिकेशन को धीमा करना। सिस्टम क्रैश। इसलिए, मेमोरी लीक की समस्या को दूर करना आवश्यक है। यूज इफेक्ट क्लीनअप फंक्शन क्या है? यह हुक का एक कार्य है जो हमें उन दुष्प्रभावों को रोकने की अनुमति देता है जिन्हें हमारे घटक के अनमाउंट होने से पहले निष्पादित करने की आवश्यकता नहीं होती है। useEffect इस तरह से बनाया गया है कि हम इसके अंदर एक फंक्शन वापस कर सकते हैं और यह रिटर्न फंक्शन वह जगह है जहाँ क्लीनअप होता है। useEffect उदाहरण के लिए, घटक ए एपीआई से उत्पादों की एक सूची प्राप्त करने का अनुरोध करता है, लेकिन एसिंक्रोनस अनुरोध करते समय, घटक ए को डोम से हटा दिया जाता है (यह अनमाउंट है)। उस अतुल्यकालिक अनुरोध को पूरा करने की कोई आवश्यकता नहीं है। तो अपने आवेदन को बेहतर बनाने के लिए एक क्लीनअप विधि के रूप में, आप अतुल्यकालिक अनुरोध को साफ (रद्द) कर सकते हैं ताकि यह पूरा न हो। : का सफाई कार्य useEffect useEffect(() => { // Your effect return () => { // Cleanup } }, [input]) प्रभाव साफ करना लाने का अनुरोध रद्द किया जा रहा है फ़ेच अनुरोध कॉल को रद्द करने के विभिन्न तरीके हैं, हम फ़ेच या एक्सियोस AbortController AbortController. का उपयोग करने के लिए, हमें कन्स्ट्रक्टर का उपयोग करके नियंत्रक बनाना होगा। फिर, जब हमारा लाने का अनुरोध शुरू होता है, तो हम अनुरोध के ऑब्जेक्ट के अंदर एक विकल्प के रूप में पास करते हैं। AbortController AbortController() options AbortSignal यह कंट्रोलर और सिग्नल को लाने के अनुरोध के साथ जोड़ता है और हमें का उपयोग करके इसे किसी भी समय रद्द करने देता है: AbortController.abort() useEffect(() => { //create a controller let controller = new AbortController(); (async () => { try { const response = await fetch(API, { // connect the controller with the fetch request signal: controller.signal, }, ); // handle success setList(await response.json()); // remove the controller controller = null; } catch (e) { // Handle the error } })(); //aborts the request when the component umounts return () => controller?.abort(); },[]); useEffect(() => { // create a controller const controller = new AbortController(); axios .get(API, { signal: controller.signal }) .then({data}) => { // handle success setList(data); }) .catch((err) => { // Handle the error }); //aborts the request when the component umounts return () => controller?.abort(); }, []); टाइमआउट की सफाई टाइमर फ़ंक्शंस का उपयोग करते समय, हम उन्हें विशेष फ़ंक्शन का उपयोग करके अनमाउंट पर साफ़ कर सकते हैं। setTimeout(callback, time) clearTimeout(timerId) useEffect(() => { let timerId = setTimeout(() => { // do something timerId = null; }, 3000); // cleanup the timmer when component unmout return () => clearTimeout(timerId); }, []); अंतराल की सफाई टाइमआउट्स की तरह, उन्हें फ़ंक्शन के साथ साफ करने के लिए एक विशेष कार्य होता है। setIntervals(callback, time) clearInterval(intervalId) useEffect(() => { let intervalId = setInterval(() => { // do something like update the state }, 1000); // cleanup the timer when component unmout return () => clearInterval(interval); }, []); घटना श्रोताओं की सफाई क्लीन अप लिसनर के माध्यम से होता है। श्रोता को सही ढंग से हटाने के लिए कॉल को कॉल में फ़ंक्शन का संदर्भ देना चाहिए। window.removeEventListener removeEventListener removeEventListener समान useEffect(() => { // function to add to EventListener const handleKeyUp= (event) => { switch (event.key) { case "Escape": setCollapsed(true); break; } } window.addEventListener("keyup", handleKeyUp); // cleanup the listener when component unmout return () => window.removeEventListener("keyup", handleKeyUp); }, []); वेब सॉकेट की सफाई जब आप एक बनाते हैं कनेक्शन, आप इसे क्लीनअप फ़ंक्शन में बंद कर सकते हैं। वेबसॉकेट socket.close() useEffect(() => { const ws = new WebSocket(url, protocols) // do what you want with the socket ws.onmessage = (event) => { setValue(JSON.parse(event.data)); }; // cleanup the web socket when component unmout return () => ws.close() }, []) निष्कर्ष हमने सीखा है कि मेमोरी लीक और अनावश्यक और अवांछित व्यवहारों से बचने के लिए कुछ साइड इफेक्ट्स के लिए सफाई की आवश्यकता होती है। इन समस्याओं से बचने और अनुप्रयोगों को अनुकूलित करने के लिए हमें यह सीखना चाहिए कि कब और कैसे हुक के क्लीनअप फ़ंक्शन का उपयोग करना है। useEffect जब घटक अनमाउंट होता है तो मैं अतुल्यकालिक प्रभावों को साफ करने की सलाह देता हूं। साथ ही, यदि एसिंक्रोनस साइड इफेक्ट प्रोप या स्टेट वैल्यू पर निर्भर करता है तो घटक अपडेट होने पर उन्हें साफ करने पर भी विचार करें। मुझे आशा है कि आपको यह लेख उपयोगी लगा होगा और अब आप सफाई सुविधा का सही उपयोग कर सकते हैं। अधिक पढ़ें: https://hackernoon.com/autocomplete-search-component-with-react-and-typescript?embedable=true भी प्रकाशित हुआ। यहाँ
