रिएक्ट के यूज इफेक्ट हुक में क्लीनअप फंक्शन — समझाया गया

उदाहरणों के साथ।

यदि आप रिएक्ट सीखना शुरू कर रहे हैं या पहले से ही इस लाइब्रेरी का उपयोग करने में कुछ समय है, तो निश्चित रूप से, आप एसिंक्रोनस फ़ंक्शंस से संबंधित कुछ त्रुटियों या चेतावनियों में आए हैं, विशेष रूप से हुक 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 हुक के क्लीनअप फ़ंक्शन का उपयोग करना है।

जब घटक अनमाउंट होता है तो मैं अतुल्यकालिक प्रभावों को साफ करने की सलाह देता हूं। साथ ही, यदि एसिंक्रोनस साइड इफेक्ट प्रोप या स्टेट वैल्यू पर निर्भर करता है तो घटक अपडेट होने पर उन्हें साफ करने पर भी विचार करें।

मुझे आशा है कि आपको यह लेख उपयोगी लगा होगा और अब आप सफाई सुविधा का सही उपयोग कर सकते हैं।

अधिक पढ़ें: