ಬಲೆಯಿಂದ ತಪ್ಪಿಸಿಕೊಳ್ಳಿ: React Hooks ನಲ್ಲಿ Stale Closures ಸಮಸ್ಯೆಯನ್ನು ಸರಿಪಡಿಸುವುದು
Stale closures ಇವು React ನಲ್ಲಿ ಮೌನವಾಗಿ ಡೇಟಾ ನಷ್ಟಕ್ಕೆ ಕಾರಣವಾಗುತ್ತವೆ.
ನೀವು ಹಿನ್ನೆಲೆಯಲ್ಲಿ (background) ಟೈಮರ್ ಹೊಂದಿರುವ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತೀರಿ ಎಂದು ಭಾವಿಸೋಣ. ಪ್ರತಿ 5 ಸೆಕೆಂಡಿಗೆ ಡೇಟಾವನ್ನು ಆಟೋ-ಸೇವ್ ಮಾಡಲು ನೀವು useEffect hook ಒಳಗೆ setInterval ಅನ್ನು ಬಳಸುತ್ತೀರಿ.
ಇಂಟರ್ವಲ್ ಕಾರ್ಯಗತಗೊಂಡಾಗ (fires) ದೋಷ (bug) ಸಂಭವಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ಪೂರ್ಣ ಪುಟವನ್ನು ಟೈಪ್ ಮಾಡಿದ್ದರೂ ಸಹ, ಅದು ಖಾಲಿ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಸೇವ್ ಮಾಡುತ್ತದೆ. ಇಂಟರ್ವಲ್ ಹಳೆಯ ಸ್ಥಿತಿಯಲ್ಲೇ (past) ಸಿಲುಕಿಕೊಂಡಿರುತ್ತದೆ. ಇದು ನಿಮ್ಮ state ನ ಹಳೆಯ ಆವೃತ್ತಿಯನ್ನು ಬಳಸುತ್ತದೆ.
The Problem
useEffect ರನ್ ಆದಾಗ, ಅದು ತನ್ನ ಸ್ಕೋಪ್ನಲ್ಲಿರುವ (scope) ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುತ್ತದೆ.
- ನೀವು dependency array ನಿಂದ state ಅನ್ನು ಹೊರಗಿಟ್ಟರೆ, ಇಂಟರ್ವಲ್ ಮೊದಲನೇ ರೆಂಡರ್ನ (first render) state ಅನ್ನು ಬಳಸುತ್ತದೆ.
- ನೀವು state ಅನ್ನು dependency array ಗೆ ಸೇರಿಸಿದರೆ, ಪ್ರತಿ ಕೀ-ಸ್ಟ್ರೋಕ್ (keystroke) ಗಾಗೆ React ಇಂಟರ್ವಲ್ ಅನ್ನು ಮರುಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು (performance) ಕುಂಠಿತಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಸಮಯದ ಹೊಂದಾಣಿಕೆಯನ್ನು (timing) ಹಾಳುಮಾಡುತ್ತದೆ.
The Solution: The Mutable Ref Pattern
ನೀವು ಟೈಮರ್ ಅನ್ನು ಡೇಟಾದಿಂದ ಪ್ರತ್ಯೇಕಿಸಬೇಕು. ನಿಮ್ಮ ಇತ್ತೀಚಿನ state ಗೆ ಸ್ಥಿರವಾದ ರೆಫರೆನ್ಸ್ (constant reference) ಹೊಂದಲು useRef hook ಅನ್ನು ಬಳಸಿ. ಇದು re-renders ಅನ್ನು ತಪ್ಪಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಇಂಟರ್ವಲ್ ಅನ್ನು ಸ್ಥಿರವಾಗಿರಿಸುತ್ತದೆ.
ಇದನ್ನು ಹೇಗೆ ಅಳವಡಿಸುವುದು (implement):
- ನಿಮ್ಮ ಇತ್ತೀಚಿನ state ಅನ್ನು ಹಿಡಿದಿಡಲು ಒಂದು ref ಅನ್ನು ರಚಿಸಿ.
- ನಿಮ್ಮ state ಬದಲಾದಾಗಲೆಲ್ಲಾ ಆ ref ಅನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡಲು
useEffectಬಳಸಿ. - ನಿಮ್ಮ ಇಂಟರ್ವಲ್ ಕೇವಲ ಒಂದು ಬಾರಿ ರನ್ ಆಗುವಂತೆ ಮಾಡಲು ಖಾಲಿ dependency array ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ.
- ನಿಮ್ಮ ಇಂಟರ್ವಲ್ callback ಒಳಗೆ ref ಅನ್ನು ಬಳಸಿ.
ಈ ವಿಧಾನವು ನಿಮ್ಮ ಹಿನ್ನೆಲೆ ಕಾರ್ಯಗಳು (background tasks) ಯಾವಾಗಲೂ ತಾಜಾ ಡೇಟಾವನ್ನು ಬಳಸುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ UI ಅನ್ನು ವೇಗವಾಗಿ ಮತ್ತು ನಿಮ್ಮ ಡೇಟಾವನ್ನು ಸುರಕ್ಷಿತವಾಗಿರಿಸುತ್ತದೆ.
Source: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7