React AbortControllers ಬಳಸಿ Race Conditions ಅನ್ನು ನಿಲ್ಲಿಸಿ
ವೆಬ್ ಆಪ್ಗಳಲ್ಲಿ ಬಳಕೆದಾರರು ವೇಗವಾಗಿ ಚಲಿಸುತ್ತಾರೆ. ಈ ವೇಗವು ಡೆವಲಪರ್ಗಳಿಗೆ ಎರಡು ಪ್ರಮುಖ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ.
ಮೊದಲನೆಯ ಸಮಸ್ಯೆ unmounted component trap. ಬಳಕೆದಾರರು ಡೇಟಾವನ್ನು ಪಡೆಯಲು (fetch) ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುತ್ತಾರೆ. ಆ ರಿಕ್ವೆಸ್ಟ್ ಪೂರ್ಣಗೊಳ್ಳಲು ನಾಲ್ಕು ಸೆಕೆಂಡುಗಳು ಬೇಕಾಗುತ್ತದೆ. ಎರಡು ಸೆಕೆಂಡುಗಳ ನಂತರ, ಬಳಕೆದಾರರು 'back' ಕ್ಲಿಕ್ ಮಾಡಿ ಪುಟದಿಂದ ಹೊರಬರುತ್ತಾರೆ. ರಿಕ್ವೆಸ್ಟ್ ಹಿನ್ನೆಲೆಯಲ್ಲಿ (background) ಮುಂದುವರಿಯುತ್ತದೆ. ಡೇಟಾ ಬಂದಾಗ, ಕೋಡ್ ಈಗ ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ. ಇದು ಮೆಮೊರಿ ಲೀಕ್ಗಳಿಗೆ (memory leaks) ಕಾರಣವಾಗುತ್ತದೆ.
ಎರಡನೆಯ ಸಮಸ್ಯೆ race condition. ಇದು ಸರ್ಚ್ ಬಾರ್ಗಳಲ್ಲಿ (search bars) ಹೆಚ್ಚಾಗಿ ಕಂಡುಬರುತ್ತದೆ.
- ಬಳಕೆದಾರರು "A" ಎಂದು ಟೈಪ್ ಮಾಡುತ್ತಾರೆ. Request 1 ಪ್ರಾರಂಭವಾಗುತ್ತದೆ.
- ಬಳಕೆದಾರರು "AB" ಎಂದು ಟೈಪ್ ಮಾಡುತ್ತಾರೆ. Request 2 ಪ್ರಾರಂಭವಾಗುತ್ತದೆ.
- Request 2 ಮೊದಲು ಪೂರ್ಣಗೊಂಡು ಸರಿಯಾದ ಡೇಟಾವನ್ನು ತೋರಿಸುತ್ತದೆ.
- Request 1 ತಡವಾಗಿ ಪೂರ್ಣಗೊಂಡು ಹಳೆಯ ಡೇಟಾದೊಂದಿಗೆ ಸ್ಕ್ರೀನ್ ಅನ್ನು ಓವರ್ರೈಟ್ (overwrite) ಮಾಡುತ್ತದೆ.
ನೀವು AbortController API ಮೂಲಕ ಈ ಎರಡೂ ಸಮಸ್ಯೆಗಳನ್ನು ಸರಿಪಡಿಸಬಹುದು. ಈ ಟೂಲ್ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದಾಗ ನೆಟ್ವರ್ಕ್ ರಿಕ್ವೆಸ್ಟ್ ಅನ್ನು ನಿಲ್ಲಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
ಇದನ್ನು ಹೇಗೆ ಅಳವಡಿಸುವುದು (implement):
- ನಿಮ್ಮ useEffect ಒಳಗೆ ಹೊಸ AbortController ಅನ್ನು ರಚಿಸಿ.
- ನಿಮ್ಮ fetch ರಿಕ್ವೆಸ್ಟ್ಗೆ controller signal ಅನ್ನು ಕಳುಹಿಸಿ.
- ಎರರ್ (error) ಅನ್ನು ನಿರ್ವಹಿಸಲು try/catch ಬ್ಲಾಕ್ ಬಳಸಿ.
- ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ರದ್ದುಗೊಳಿಸುವುದನ್ನು (intentional cancellations) ನಿರ್ಲಕ್ಷಿಸಲು, ಎರರ್ ಹೆಸರು AbortError ಆಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ.
- controller.abort() ಅನ್ನು ಕರೆಯಲು ನಿಮ್ಮ useEffect ನಲ್ಲಿ cleanup function ಅನ್ನು ರಿಟರ್ನ್ ಮಾಡಿ.
ಕಾಂಪೊನೆಂಟ್ ಅನ್ಮೌಂಟ್ (unmount) ಆದಾಗ ಅಥವಾ ಡಿಪೆಂಡೆನ್ಸಿ (dependency) ಬದಲಾದಾಗ ಈ ಪ್ಯಾಟರ್ನ್ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
ಈ ವಿಧಾನದ ಪ್ರಯೋಜನಗಳು:
- ಹಳೆಯ ಡೇಟಾ ಹೊಸ ಡೇಟಾವನ್ನು ಓವರ್ರೈಟ್ ಮಾಡುವುದನ್ನು ನೀವು ತಡೆಯಬಹುದು.
- ನಿಮ್ಮ React ಆಪ್ನಲ್ಲಿ ಮೆಮೊರಿ ಲೀಕ್ಗಳನ್ನು ತಡೆಯಬಹುದು.
- ಬ್ರೌಸರ್ ನೆಟ್ವರ್ಕ್ ಕನೆಕ್ಷನ್ಗಳನ್ನು ಮುಕ್ತಗೊಳಿಸಬಹುದು.
- ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನಿರೀಕ್ಷಿತ ಬದಲಾವಣೆಗಳಿಲ್ಲದೆ ಸ್ಥಿರವಾಗಿರುತ್ತದೆ (predictable and stable).
Source: https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899