React Hooks मधील Stale Closures कशा सुधाराव्यात
तुम्ही React च्या useEffect हुकमध्ये एक टायमर तयार करता. तुम्हाला दर पाच सेकंदांनी एखादे डॉक्युमेंट ऑटो-सेव्ह करायचे आहे. टायमर चालतो, पण तो एक रिकामे डॉक्युमेंट सेव्ह करतो. वापरकर्त्याने दहा परिच्छेद टाईप केले आहेत, पण टायमरला काहीच दिसत नाही.
हे एक 'stale closure' आहे.
useEffect हुक पहिल्या रेंडरमधील व्हेरिएबल्स कॅप्चर करतो. जर तुम्ही स्टेटला (state) डिपेंडन्सी ॲरेमधून (dependency array) वगळले, तर टायमर भूतकाळातच अडकून राहतो. तो तुमच्या डेटाची जुनी आवृत्ती वापरतो.
जर तुम्ही स्टेटला डिपेंडन्सी ॲरेमध्ये जोडले, तर वापरकर्ता प्रत्येक अक्षर टाईप करतो तेव्हा टायमर रिसेट होतो. यामुळे परफॉर्मन्स खराब होतो आणि तुमच्या टाइमिंग लॉजिकमध्ये बिघाड होतो.
तुम्ही हे 'Mutable Ref Pattern' वापरून सोडवू शकता.
तुमची लेटेस्ट स्टेट साठवण्यासाठी useRef हुक वापरा. यामुळे नवीन रेंडर्स ट्रिगर न करता किंवा इंटरव्हल रिसेट न करता तुमचा टायमर ताजी (fresh) डेटा मिळवू शकतो.
या स्टेप्स फॉलो करा:
- तुमची स्टेट साठवण्यासाठी एक
refतयार करा. - स्टेटसोबत
refसिंक करण्यासाठीuseEffectवापरा. - तुमचा इंटरव्हल रिकाम्या डिपेंडन्सी ॲरेसह सेट करा जेणेकरून तो फक्त एकदाच चालेल.
- इंटरव्हल कॉलबॅकच्या आत
refॲक्सेस करा.
हा दृष्टिकोन तुमच्या टायमरला तुमच्या डेटापासून वेगळे (decouple) करतो. तुमचे बॅकग्राउंड टास्क स्थिर राहतात आणि तुमचा डेटा अचूक राहतो.
शांतपणे घडणाऱ्या (silent) बग्समुळे वापरकर्त्याचा डेटा गमावणे थांबवा. तुमचे असिंक्रोनस टास्क (asynchronous tasks) तुमच्या UI सोबत सिंक ठेवण्यासाठी refs वापरा.
स्त्रोत: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7