𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀-இல் 𝗦𝘁𝗮𝗹𝗲 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀-ஐ சரிசெய்யுங்கள்
நீங்கள் ஒரு React useEffect hook-இல் ஒரு timer-ஐ உருவாக்குகிறீர்கள். ஒவ்வொரு ஐந்து வினாடிக்கும் ஒரு ஆவணத்தை (document) தானாகச் சேமிக்க (auto-save) விரும்புகிறீர்கள். Timer இயங்குகிறது, ஆனால் அது ஒரு காலியான ஆவணத்தையே சேமிக்கிறது. பயனர் பத்து பத்திகளைத் தட்டச்சு செய்திருக்கலாம், ஆனால் timer எதையும் காணவில்லை.
இதுதான் stale closure.
useEffect hook முதல் render-இலிருந்து மாறிகளை (variables) எடுத்துக்கொள்கிறது. நீங்கள் dependency array-இல் state-ஐச் சேர்க்கவில்லை என்றால், timer கடந்த காலத்திலேயே தங்கிவிடும். அது உங்கள் தரவின் பழைய பதிப்பையே (old version) பயன்படுத்தும்.
நீங்கள் dependency array-இல் state-ஐச் சேர்த்தால், பயனர் ஒவ்வொரு எழுத்தைச் சேர்க்கும் போதும் timer மீண்டும் தொடங்கும் (reset). இது செயல்திறனை (performance) பாதிப்பதோடு, உங்கள் timing logic-ஐயும் சிதைத்துவிடும்.
இதை நீங்கள் Mutable Ref Pattern மூலம் தீர்க்கலாம்.
உங்கள் சமீபத்திய state-ஐ வைத்திருக்க useRef hook-ஐப் பயன்படுத்தவும். இது புதிய render-களைத் தூண்டாமலோ அல்லது interval-ஐ reset செய்யாமலோ, உங்கள் timer புதிய தரவை அணுக அனுமதிக்கிறது.
இந்த வழிமுறைகளைப் பின்பற்றவும்:
- உங்கள் state-ஐ வைத்திருக்க ஒரு ref-ஐ உருவாக்கவும்.
- உங்கள் state-உடன் ref-ஐ ஒத்திசைக்க (sync) ஒரு useEffect-ஐப் பயன்படுத்தவும்.
- உங்கள் interval ஒருமுறை மட்டுமே இயங்குவதற்கு, ஒரு காலியான dependency array-ஐப் பயன்படுத்தவும்.
- interval callback-க்குள் ref-ஐ அணுகவும்.
இந்த அணுகுமுறை உங்கள் timer-ஐ உங்கள் தரவிலிருந்து பிரிக்கிறது (decouples). உங்கள் பின்னணிப் பணிகள் (background tasks) நிலையானதாக இருக்கும். உங்கள் தரவு துல்லியமாக இருக்கும்.
அமைதியான பிழைகளால் (silent bugs) பயனர் தரவை இழப்பதைத் தவிர்க்கவும். உங்கள் asynchronous பணிகளை உங்கள் UI-உடன் ஒத்திசைவில் வைத்திருக்க refs-ஐப் பயன்படுத்தவும்.
ஆதாரம்: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7