𝗙𝗶𝘅 𝗦𝘁𝗮𝗹𝗲 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀
आप React useEffect hook में एक टाइमर बनाते हैं। आप हर पांच सेकंड में एक डॉक्यूमेंट को ऑटो-सेव करना चाहते हैं। टाइमर चलता है, लेकिन यह एक खाली डॉक्यूमेंट सेव कर देता है। यूजर ने दस पैराग्राफ टाइप किए हैं, लेकिन टाइमर को कुछ भी दिखाई नहीं देता।
यह एक stale closure है।
useEffect hook पहले रेंडर (render) से वेरिएबल्स को कैप्चर कर लेता है। यदि आप state को dependency array से बाहर रखते हैं, तो टाइमर अतीत (past) में ही अटका रहता है। यह आपके डेटा के पुराने वर्ज़न का उपयोग करता है।
यदि आप state को dependency array में जोड़ देते हैं, तो यूजर द्वारा एक भी कैरेक्टर टाइप करने पर टाइमर रीसेट हो जाता है। इससे परफॉरमेंस खराब होती है और आपका टाइमिंग लॉजिक भी टूट जाता है।
आप इसे Mutable Ref Pattern के साथ हल कर सकते हैं।
अपने नवीनतम state को रखने के लिए useRef hook का उपयोग करें। यह आपके टाइमर को नए रेंडर्स ट्रिगर किए बिना या इंटरवल (interval) को रीसेट किए बिना ताज़ा डेटा एक्सेस करने की अनुमति देता है।
इन चरणों का पालन करें:
- अपने state को रखने के लिए एक ref बनाएँ।
- ref को अपने state के साथ सिंक (sync) करने के लिए
useEffectका उपयोग करें। - अपने interval को एक खाली dependency array के साथ सेट करें ताकि यह केवल एक बार चले।
- interval callback के अंदर ref को एक्सेस करें।
यह अप्रोच आपके टाइमर को आपके डेटा से अलग (decouple) कर देती है। आपके बैकग्राउंड टास्क स्थिर रहते हैं। आपका डेटा सटीक रहता है।
साइलेंट बग्स (silent bugs) के कारण यूजर डेटा खोना बंद करें। अपने asynchronous tasks को अपने UI के साथ सिंक में रखने के लिए refs का उपयोग करें।
Source: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7