𝗘𝘀𝗰𝗮𝗽𝗶𝗻𝗴 𝘁𝗵𝗲 𝗧𝗿𝗮𝗽: 𝗙𝗶𝘅𝗶𝗻𝗴 𝗦𝘁𝗮𝗹𝗲 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀
Stale closures मुळे React मध्ये डेटाचे न दिसणारे नुकसान (silent data loss) होऊ शकते.
समजा तुम्ही बॅकग्राउंड टाइमरसह एक डॅशबोर्ड तयार करत आहात. दर ५ सेकंदांनी डेटा ऑटो-सेव्ह करण्यासाठी तुम्ही useEffect hook मध्ये setInterval वापरता.
जेव्हा interval चालते, तेव्हा ही त्रुटी (bug) उद्भवते. वापरकर्त्याने पूर्ण पान टाईप केले असूनही, ते एक रिकामे डॉक्युमेंट सेव्ह करते. कारण तो interval भूतकाळात अडकून पडतो. तो तुमच्या state ची जुनी आवृत्ती (version) वापरतो.
The Problem
जेव्हा useEffect चालते, तेव्हा ते त्याच्या scope मधील व्हेरिएबल्स कॅप्चर करते.
- जर तुम्ही state ला dependency array च्या बाहेर ठेवले, तर interval पहिल्या render मधील state वापरते.
- जर तुम्ही state ला dependency array मध्ये जोडले, तर React प्रत्येक कीस्ट्रोकवर (keystroke) interval पुन्हा सुरू करते. यामुळे परफॉर्मन्सवर परिणाम होतो आणि तुमचे टायमिंग बिघडते.
The Solution: The Mutable Ref Pattern
तुम्हाला टाइमर आणि डेटा वेगळे करावे लागतील. तुमच्या लेटेस्ट state चा सतत संदर्भ (constant reference) ठेवण्यासाठी useRef hook वापरा. यामुळे re-renders टाळता येतात आणि तुमचा interval स्थिर राहतो.
How to implement it:
- तुमचे लेटेस्ट state साठवण्यासाठी एक ref तयार करा.
- जेव्हा जेव्हा तुमचे state बदलेल, तेव्हा तो ref अपडेट करण्यासाठी
useEffectवापरा. - तुमचा interval रिकाम्या dependency array सह सुरू करा जेणेकरून तो फक्त एकदाच चालेल.
- तुमच्या interval callback मध्ये ref चा वापर करा.
ही पद्धत तुमची बॅकग्राउंड टास्क नेहमी ताजे (fresh) डेटा वापरतील याची खात्री देते. यामुळे तुमचे UI वेगवान राहते आणि तुमचा डेटा सुरक्षित राहतो.
Source: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7