பொறியிலிருந்து தப்பித்தல்: React Hooks-இல் Stale Closures சிக்கலைச் சரிசெய்தல்
React-இல் Stale closures அமைதியான தரவு இழப்பை (silent data loss) ஏற்படுத்துகின்றன.
நீங்கள் ஒரு பின்னணி டைமருடன் (background timer) ஒரு டேஷ்போர்டை உருவாக்குகிறீர்கள். ஒவ்வொரு 5 வினாடிக்கும் தரவை தானாகச் சேமிக்க (auto-save), useEffect hook-க்குள் setInterval-ஐப் பயன்படுத்துகிறீர்கள்.
அந்த interval இயங்கும்போது பிழை (bug) ஏற்படுகிறது. பயனர் ஒரு முழுப் பக்கத்தையும் தட்டச்சு செய்திருந்தாலும், அது ஒரு வெற்று ஆவணத்தையே (empty document) சேமிக்கிறது. அந்த interval கடந்த காலத்திலேயே தங்கிவிடுகிறது. இது உங்கள் state-இன் பழைய பதிப்பையே பயன்படுத்துகிறது.
The Problem
useEffect இயங்கும்போது, அது அதன் scope-இல் உள்ள மாறிகளை (variables) பிடித்துக் கொள்கிறது.
- நீங்கள் dependency array-இல் state-ஐச் சேர்க்கவில்லை என்றால், interval முதல் render-இன் state-ஐப் பயன்படுத்தும்.
- நீங்கள் state-ஐ dependency array-இல் சேர்த்தால், ஒவ்வொரு முறை தட்டச்சு செய்யும்போதும் (keystroke) React அந்த interval-ஐ மீண்டும் தொடங்கும். இது செயல்திறனை (performance) பாதிப்பதோடு, உங்கள் நேரத்தையும் (timing) சீர்குலைக்கும்.
The Solution: The Mutable Ref Pattern
நீங்கள் டைமரைத் தரவிலிருந்து பிரிக்க வேண்டும். உங்கள் சமீபத்திய state-இன் நிலையான குறிப்பை (constant reference) வைத்திருக்க useRef hook-ஐப் பயன்படுத்தவும். இது re-renders-ஐத் தவிர்த்து, உங்கள் interval-ஐ நிலையானதாக (stable) வைத்திருக்கும்.
How to implement it:
- உங்கள் சமீபத்திய state-ஐச் சேமிக்க ஒரு ref-ஐ உருவாக்கவும்.
- உங்கள் state மாறும்போது அந்த ref-ஐப் புதுப்பிக்க
useEffect-ஐப் பயன்படுத்தவும். - உங்கள் interval ஒருமுறை மட்டுமே இயங்குவதற்கு, ஒரு காலியான (empty) dependency array-உடன் அதைத் தொடங்கவும்.
- உங்கள் interval callback-க்குள் அந்த ref-ஐ அணுகவும்.
இந்த முறை உங்கள் பின்னணிப் பணிகள் (background tasks) எப்போதும் புதிய தரவைப் பயன்படுத்துவதை உறுதி செய்கிறது. இது உங்கள் UI-ஐ வேகமாகவும், உங்கள் தரவை பாதுகாப்பாகவும் வைத்திருக்கும்.
Source: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7