ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಸರಿಯಾದ ಕಾಂಪೊನೆಂಟ್ ಕ್ಲೀನಪ್ ಅನ್ನು ಪರಿಶೀಲಿಸುವ ಮೂಲಕ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಗುರುತಿಸುವುದು ಮತ್ತು ತಡೆಯುವುದನ್ನು ಕಲಿಯಿರಿ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ರಕ್ಷಿಸಿ.
ರಿಯಾಕ್ಟ್ ಮೆಮೊರಿ ಲೀಕ್ ಪತ್ತೆ: ಕಾಂಪೊನೆಂಟ್ ಕ್ಲೀನಪ್ ಪರಿಶೀಲನೆಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ
ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳು ಸದ್ದಿಲ್ಲದೆ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಕುಗ್ಗಿಸಬಹುದು ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವದ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಅನ್‌ಮೌಂಟ್ ಆದಾಗ, ಆದರೆ ಅವುಗಳಿಗೆ ಸಂಬಂಧಿಸಿದ ಸಂಪನ್ಮೂಲಗಳು (ಟೈಮರ್‌ಗಳು, ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳು, ಮತ್ತು ಸಬ್‌ಸ್ಕ್ರಿಪ್ಷನ್‌ಗಳು) ಸರಿಯಾಗಿ ಕ್ಲೀನ್ ಅಪ್ ಆಗದಿದ್ದಾಗ ಈ ಲೀಕ್‌ಗಳು ಸಂಭವಿಸುತ್ತವೆ. ಕಾಲಾನಂತರದಲ್ಲಿ, ಈ ಬಿಡುಗಡೆಯಾಗದ ಸಂಪನ್ಮೂಲಗಳು ಸಂಗ್ರಹಗೊಂಡು, ಮೆಮೊರಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿಧಾನಗೊಳಿಸುತ್ತವೆ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ಸರಿಯಾದ ಕಾಂಪೊನೆಂಟ್ ಕ್ಲೀನಪ್ ಅನ್ನು ಪರಿಶೀಲಿಸುವ ಮೂಲಕ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ತಡೆಯಲು ತಂತ್ರಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ಒಂದು ಕಾಂಪೊನೆಂಟ್ DOM ನಿಂದ ಬಿಡುಗಡೆಯಾದಾಗ, ಆದರೆ ಕೆಲವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಇನ್ನೂ ಅದರ ರೆಫರೆನ್ಸ್ ಅನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಂಡಾಗ ಮೆಮೊರಿ ಲೀಕ್ ಉಂಟಾಗುತ್ತದೆ, ಇದರಿಂದ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟರ್ ಅದು ಆಕ್ರಮಿಸಿಕೊಂಡಿದ್ದ ಮೆಮೊರಿಯನ್ನು ಮುಕ್ತಗೊಳಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ರಿಯಾಕ್ಟ್ ತನ್ನ ಕಾಂಪೊನೆಂಟ್ ಲೈಫ್‌ಸೈಕಲ್ ಅನ್ನು ಸಮರ್ಥವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ, ಆದರೆ ಡೆವಲಪರ್‌ಗಳು ತಮ್ಮ ಜೀವನಚಕ್ರದಲ್ಲಿ ಪಡೆದ ಯಾವುದೇ ಸಂಪನ್ಮೂಲಗಳ ಮೇಲಿನ ನಿಯಂತ್ರಣವನ್ನು ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಬಿಟ್ಟುಕೊಡುತ್ತವೆ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬೇಕು.
ಮೆಮೊರಿ ಲೀಕ್‌ಗಳಿಗೆ ಸಾಮಾನ್ಯ ಕಾರಣಗಳು:
- ತೆರವುಗೊಳಿಸದ ಟೈಮರ್‌ಗಳು ಮತ್ತು ಇಂಟರ್ವಲ್‌ಗಳು: ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದ ನಂತರ ಟೈಮರ್‌ಗಳನ್ನು (
setTimeout,setInterval) ಚಾಲನೆಯಲ್ಲಿಡುವುದು. - ತೆಗೆದುಹಾಕದ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳು:
window,document, ಅಥವಾ ಇತರ DOM ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಲಗತ್ತಿಸಲಾದ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಡಿಟ್ಯಾಚ್ ಮಾಡಲು ವಿಫಲವಾಗುವುದು. - ಅಪೂರ್ಣ ಸಬ್‌ಸ್ಕ್ರಿಪ್ಷನ್‌ಗಳು: ಅಬ್ಸರ್ವೇಬಲ್‌ಗಳಿಂದ (ಉದಾಹರಣೆಗೆ, RxJS) ಅಥವಾ ಇತರ ಡೇಟಾ ಸ್ಟ್ರೀಮ್‌ಗಳಿಂದ ಅನ್‌ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡದಿರುವುದು.
- ಬಿಡುಗಡೆಯಾಗದ ಸಂಪನ್ಮೂಲಗಳು: ಥರ್ಡ್-ಪಾರ್ಟಿ ಲೈಬ್ರರಿಗಳು ಅಥವಾ API ಗಳಿಂದ ಪಡೆದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಿಡುಗಡೆ ಮಾಡದಿರುವುದು.
- ಕ್ಲೋಶರ್‌ಗಳು: ಕಾಂಪೊನೆಂಟ್‌ಗಳೊಳಗಿನ ಫಂಕ್ಷನ್‌ಗಳು ಅರಿಯದೆಯೇ ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೇಟ್ ಅಥವಾ ಪ್ರಾಪ್ಸ್‌ಗಳಿಗೆ ರೆಫರೆನ್ಸ್‌ಗಳನ್ನು ಸೆರೆಹಿಡಿಯುವುದು ಮತ್ತು ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುವುದು.
ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಪತ್ತೆ ಮಾಡುವುದು
ಡೆವಲಪ್‌ಮೆಂಟ್ ಸೈಕಲ್‌ನ ಆರಂಭದಲ್ಲಿಯೇ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಗುರುತಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಈ ಸಮಸ್ಯೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಹಲವಾರು ತಂತ್ರಗಳು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಬಹುದು:
1. ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್
ಆಧುನಿಕ ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳು ಶಕ್ತಿಯುತ ಮೆಮೊರಿ ಪ್ರೊಫೈಲಿಂಗ್ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ನಿರ್ದಿಷ್ಟವಾಗಿ ಕ್ರೋಮ್ ಡೆವ್ಟೂಲ್ಸ್ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ.
- ಹೀಪ್ ಸ್ನ್ಯಾಪ್‌ಶಾಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ: ಅಪ್ಲಿಕೇಶನ್‌ನ ಮೆಮೊರಿಯ ಸ್ನ್ಯಾಪ್‌ಶಾಟ್‌ಗಳನ್ನು ಬೇರೆ ಬೇರೆ ಸಮಯದಲ್ಲಿ ಸೆರೆಹಿಡಿಯಿರಿ. ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದ ನಂತರ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟ್ ಆಗದ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಗುರುತಿಸಲು ಸ್ನ್ಯಾಪ್‌ಶಾಟ್‌ಗಳನ್ನು ಹೋಲಿಕೆ ಮಾಡಿ.
- ಅಲೋಕೇಷನ್ ಟೈಮ್‌ಲೈನ್: ಅಲೋಕೇಷನ್ ಟೈಮ್‌ಲೈನ್ ಕಾಲಾನಂತರದಲ್ಲಿ ಮೆಮೊರಿ ಹಂಚಿಕೆಗಳನ್ನು ತೋರಿಸುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮೌಂಟ್ ಮತ್ತು ಅನ್‌ಮೌಂಟ್ ಆಗುತ್ತಿರುವಾಗಲೂ ಹೆಚ್ಚುತ್ತಿರುವ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಗಮನಿಸಿ.
- ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟ್ಯಾಬ್: ಮೆಮೊರಿಯನ್ನು ಉಳಿಸಿಕೊಳ್ಳುತ್ತಿರುವ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಗುರುತಿಸಲು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಪ್ರೊಫೈಲ್‌ಗಳನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಿ.
ಉದಾಹರಣೆ (ಕ್ರೋಮ್ ಡೆವ್ಟೂಲ್ಸ್):
- ಕ್ರೋಮ್ ಡೆವ್ಟೂಲ್ಸ್ ತೆರೆಯಿರಿ (Ctrl+Shift+I ಅಥವಾ Cmd+Option+I).
- "Memory" ಟ್ಯಾಬ್‌ಗೆ ಹೋಗಿ.
- "Heap snapshot" ಆಯ್ಕೆಮಾಡಿ ಮತ್ತು "Take snapshot" ಕ್ಲಿಕ್ ಮಾಡಿ.
- ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟಿಂಗ್ ಮತ್ತು ಅನ್‌ಮೌಂಟಿಂಗ್ ಅನ್ನು ಟ್ರಿಗರ್ ಮಾಡಲು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಿ.
- ಇನ್ನೊಂದು ಸ್ನ್ಯಾಪ್‌ಶಾಟ್ ತೆಗೆದುಕೊಳ್ಳಿ.
- ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟ್ ಆಗಬೇಕಾಗಿದ್ದ ಆದರೆ ಆಗದ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಹುಡುಕಲು ಎರಡು ಸ್ನ್ಯಾಪ್‌ಶಾಟ್‌ಗಳನ್ನು ಹೋಲಿಕೆ ಮಾಡಿ.
2. ರಿಯಾಕ್ಟ್ ಡೆವ್ಟೂಲ್ಸ್ ಪ್ರೊಫೈಲರ್
ರಿಯಾಕ್ಟ್ ಡೆವ್ಟೂಲ್ಸ್ ಒಂದು ಪ್ರೊಫೈಲರ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ಮೆಮೊರಿ ಲೀಕ್‌ಗಳಿಂದ ಉಂಟಾಗುವ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಇದು ನೇರವಾಗಿ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚದಿದ್ದರೂ, ನಿರೀಕ್ಷೆಯಂತೆ ವರ್ತಿಸದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸೂಚಿಸುತ್ತದೆ.
3. ಕೋಡ್ ವಿಮರ್ಶೆಗಳು
ನಿಯಮಿತ ಕೋಡ್ ವಿಮರ್ಶೆಗಳು, ವಿಶೇಷವಾಗಿ ಕಾಂಪೊನೆಂಟ್ ಕ್ಲೀನಪ್ ಲಾಜಿಕ್ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿ, ಸಂಭಾವ್ಯ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಹಿಡಿಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್‌ಗಳೊಂದಿಗೆ useEffect ಹುಕ್‌ಗಳಿಗೆ ಹೆಚ್ಚಿನ ಗಮನ ಕೊಡಿ, ಮತ್ತು ಎಲ್ಲಾ ಟೈಮರ್‌ಗಳು, ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳು, ಮತ್ತು ಸಬ್‌ಸ್ಕ್ರಿಪ್ಷನ್‌ಗಳು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸಲ್ಪಡುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
4. ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿಗಳು
ಜೆಸ್ಟ್ ಮತ್ತು ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿಯಂತಹ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿಗಳನ್ನು ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ನಿರ್ದಿಷ್ಟವಾಗಿ ಪರಿಶೀಲಿಸುವ ಇಂಟಿಗ್ರೇಶನ್ ಟೆಸ್ಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಬಳಸಬಹುದು. ಈ ಟೆಸ್ಟ್‌ಗಳು ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟಿಂಗ್ ಮತ್ತು ಅನ್‌ಮೌಂಟಿಂಗ್ ಅನ್ನು ಅನುಕರಿಸಬಹುದು ಮತ್ತು ಯಾವುದೇ ಸಂಪನ್ಮೂಲಗಳು ಉಳಿದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು.
ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ತಡೆಯುವುದು: ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ನಿಭಾಯಿಸಲು ಉತ್ತಮ ಮಾರ್ಗವೆಂದರೆ ಅವು ಮೊದಲ ಸ್ಥಾನದಲ್ಲಿ ಸಂಭವಿಸದಂತೆ ತಡೆಯುವುದು. ಅನುಸರಿಸಬೇಕಾದ ಕೆಲವು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಇಲ್ಲಿವೆ:
1. ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್‌ಗಳೊಂದಿಗೆ useEffect ಬಳಸುವುದು
useEffect ಹುಕ್ ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಪ್ರಾಥಮಿಕ ಯಾಂತ್ರಿಕತೆಯಾಗಿದೆ. ಟೈಮರ್‌ಗಳು, ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳು, ಅಥವಾ ಸಬ್‌ಸ್ಕ್ರಿಪ್ಷನ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ, ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಈ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಅನ್‌ರಿಜಿಸ್ಟರ್ ಮಾಡುವ ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಯಾವಾಗಲೂ ಒದಗಿಸಿ.
ಉದಾಹರಣೆ:
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
return () => {
clearInterval(intervalId);
console.log('Timer cleared!');
};
}, []);
return (
Count: {count}
);
}
export default MyComponent;
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, useEffect ಹುಕ್ ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ count ಸ್ಟೇಟ್ ಅನ್ನು ಹೆಚ್ಚಿಸುವ ಒಂದು ಇಂಟರ್ವಲ್ ಅನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ. ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ (useEffect ನಿಂದ ಹಿಂತಿರುಗಿಸಲ್ಪಟ್ಟಿದ್ದು) ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಇಂಟರ್ವಲ್ ಅನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ, ಇದರಿಂದ ಮೆಮೊರಿ ಲೀಕ್ ಅನ್ನು ತಡೆಯುತ್ತದೆ.
2. ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದು
ನೀವು window, document, ಅಥವಾ ಇತರ DOM ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಲಗತ್ತಿಸಿದರೆ, ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಅವುಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
ಉದಾಹರಣೆ:
import React, { useEffect } from 'react';
function MyComponent() {
const handleScroll = () => {
console.log('Scrolled!');
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
console.log('Scroll listener removed!');
};
}, []);
return (
Scroll this page.
);
}
export default MyComponent;
ಈ ಉದಾಹರಣೆಯು window ಗೆ ಸ್ಕ್ರಾಲ್ ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ಲಗತ್ತಿಸುತ್ತದೆ. ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ.
3. ಅಬ್ಸರ್ವೇಬಲ್‌ಗಳಿಂದ ಅನ್‌ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡುವುದು
ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅಬ್ಸರ್ವೇಬಲ್‌ಗಳನ್ನು (ಉದಾಹರಣೆಗೆ, RxJS) ಬಳಸಿದರೆ, ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ನೀವು ಅವುಗಳಿಂದ ಅನ್‌ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಹಾಗೆ ಮಾಡಲು ವಿಫಲವಾದರೆ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳು ಮತ್ತು ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು.
ಉದಾಹರಣೆ (RxJS ಬಳಸಿ):
import React, { useState, useEffect } from 'react';
import { interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
function MyComponent() {
const [count, setCount] = useState(0);
const destroy$ = new Subject();
useEffect(() => {
interval(1000)
.pipe(takeUntil(destroy$))
.subscribe(val => {
setCount(val);
});
return () => {
destroy$.next();
destroy$.complete();
console.log('Subscription unsubscribed!');
};
}, []);
return (
Count: {count}
);
}
export default MyComponent;
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಒಂದು ಅಬ್ಸರ್ವೇಬಲ್ (interval) ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ ಮೌಲ್ಯಗಳನ್ನು ಹೊರಸೂಸುತ್ತದೆ. takeUntil ಆಪರೇಟರ್, destroy$ ಸಬ್ಜೆಕ್ಟ್ ಒಂದು ಮೌಲ್ಯವನ್ನು ಹೊರಸೂಸಿದಾಗ ಅಬ್ಸರ್ವೇಬಲ್ ಪೂರ್ಣಗೊಳ್ಳುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ destroy$ ಮೇಲೆ ಒಂದು ಮೌಲ್ಯವನ್ನು ಹೊರಸೂಸುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಪೂರ್ಣಗೊಳಿಸುತ್ತದೆ, ಇದರಿಂದ ಅಬ್ಸರ್ವೇಬಲ್‌ನಿಂದ ಅನ್‌ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಆಗುತ್ತದೆ.
4. ಫೆಚ್ API ಗಾಗಿ AbortController ಬಳಸುವುದು
ಫೆಚ್ API ಬಳಸಿ API ಕಾಲ್‌ಗಳನ್ನು ಮಾಡುವಾಗ, ವಿನಂತಿಯು ಪೂರ್ಣಗೊಳ್ಳುವ ಮೊದಲು ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದರೆ ವಿನಂತಿಯನ್ನು ರದ್ದುಗೊಳಿಸಲು AbortController ಬಳಸಿ. ಇದು ಅನಗತ್ಯ ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಗಳು ಮತ್ತು ಸಂಭಾವ್ಯ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ತಡೆಯುತ್ತದೆ.
ಉದಾಹರಣೆ:
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const abortController = new AbortController();
const signal = abortController.signal;
const fetchData = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1', { signal });
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const json = await response.json();
setData(json);
} catch (e) {
if (e.name === 'AbortError') {
console.log('Fetch aborted');
} else {
setError(e);
}
} finally {
setLoading(false);
}
};
fetchData();
return () => {
abortController.abort();
console.log('Fetch aborted!');
};
}, []);
if (loading) return Loading...
;
if (error) return Error: {error.message}
;
return (
Data: {JSON.stringify(data)}
);
}
export default MyComponent;
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಒಂದು AbortController ಅನ್ನು ರಚಿಸಲಾಗಿದೆ, ಮತ್ತು ಅದರ ಸಿಗ್ನಲ್ ಅನ್ನು fetch ಫಂಕ್ಷನ್‌ಗೆ ಪಾಸ್ ಮಾಡಲಾಗಿದೆ. ವಿನಂತಿಯು ಪೂರ್ಣಗೊಳ್ಳುವ ಮೊದಲು ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದರೆ, abortController.abort() ವಿಧಾನವನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ, ಇದು ವಿನಂತಿಯನ್ನು ರದ್ದುಗೊಳಿಸುತ್ತದೆ.
5. ಬದಲಾಯಿಸಬಹುದಾದ ಮೌಲ್ಯಗಳನ್ನು ಹಿಡಿದಿಡಲು useRef ಬಳಸುವುದು
ಕೆಲವೊಮ್ಮೆ, ನೀವು ಪುನಃ-ರೆಂಡರ್‌ಗಳಿಗೆ ಕಾರಣವಾಗದೆ ರೆಂಡರ್‌ಗಳಾದ್ಯಂತ ಮುಂದುವರಿಯುವ ಬದಲಾಯಿಸಬಹುದಾದ ಮೌಲ್ಯವನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳಬೇಕಾಗಬಹುದು. ಈ ಉದ್ದೇಶಕ್ಕಾಗಿ useRef ಹುಕ್ ಸೂಕ್ತವಾಗಿದೆ. ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್‌ನಲ್ಲಿ ಪ್ರವೇಶಿಸಬೇಕಾದ ಟೈಮರ್‌ಗಳು ಅಥವಾ ಇತರ ಸಂಪನ್ಮೂಲಗಳಿಗೆ ರೆಫರೆನ್ಸ್‌ಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ.
ಉದಾಹರಣೆ:
import React, { useRef, useEffect } from 'react';
function MyComponent() {
const timerId = useRef(null);
useEffect(() => {
timerId.current = setInterval(() => {
console.log('Tick');
}, 1000);
return () => {
clearInterval(timerId.current);
console.log('Timer cleared!');
};
}, []);
return (
Check the console for ticks.
);
}
export default MyComponent;
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, timerId ರೆಫ್ ಇಂಟರ್ವಲ್‌ನ ID ಯನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುತ್ತದೆ. ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ಇಂಟರ್ವಲ್ ಅನ್ನು ತೆರವುಗೊಳಿಸಲು ಈ ID ಯನ್ನು ಪ್ರವೇಶಿಸಬಹುದು.
6. ಅನ್‌ಮೌಂಟ್ ಆದ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು
ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದ ನಂತರ ಅದರ ಮೇಲೆ ಸ್ಟೇಟ್ ಅನ್ನು ಸೆಟ್ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಿ. ನೀವು ಇದನ್ನು ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿದರೆ ರಿಯಾಕ್ಟ್ ನಿಮಗೆ ಎಚ್ಚರಿಕೆ ನೀಡುತ್ತದೆ, ಏಕೆಂದರೆ ಇದು ಮೆಮೊರಿ ಲೀಕ್‌ಗಳು ಮತ್ತು ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು. ಈ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ತಡೆಯಲು isMounted ಪ್ಯಾಟರ್ನ್ ಅಥವಾ AbortController ಬಳಸಿ.
ಉದಾಹರಣೆ (AbortController ನೊಂದಿಗೆ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ತಪ್ಪಿಸುವುದು - ವಿಭಾಗ 4 ರಲ್ಲಿನ ಉದಾಹರಣೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ):
AbortController ವಿಧಾನವನ್ನು "ಫೆಚ್ API ಗಾಗಿ AbortController ಬಳಸುವುದು" ವಿಭಾಗದಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ ಮತ್ತು ಅಸಿಂಕ್ರೋನಸ್ ಕಾಲ್‌ಗಳಲ್ಲಿ ಅನ್‌ಮೌಂಟ್ ಆದ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಮೇಲೆ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ತಡೆಯಲು ಇದು ಶಿಫಾರಸು ಮಾಡಲಾದ ಮಾರ್ಗವಾಗಿದೆ.
ಮೆಮೊರಿ ಲೀಕ್‌ಗಳಿಗಾಗಿ ಟೆಸ್ಟಿಂಗ್
ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸರಿಯಾಗಿ ಕ್ಲೀನ್ ಅಪ್ ಮಾಡುತ್ತಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿರ್ದಿಷ್ಟವಾಗಿ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸುವ ಟೆಸ್ಟ್‌ಗಳನ್ನು ಬರೆಯುವುದು ಪರಿಣಾಮಕಾರಿ ಮಾರ್ಗವಾಗಿದೆ.
1. ಜೆಸ್ಟ್ ಮತ್ತು ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿಯೊಂದಿಗೆ ಇಂಟಿಗ್ರೇಶನ್ ಟೆಸ್ಟ್‌ಗಳು
ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟಿಂಗ್ ಮತ್ತು ಅನ್‌ಮೌಂಟಿಂಗ್ ಅನ್ನು ಅನುಕರಿಸಲು ಮತ್ತು ಯಾವುದೇ ಸಂಪನ್ಮೂಲಗಳು ಉಳಿದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಜೆಸ್ಟ್ ಮತ್ತು ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿ.
ಉದಾಹರಣೆ:
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import MyComponent from './MyComponent'; // Replace with the actual path to your component
// A simple helper function to force garbage collection (not reliable, but can help in some cases)
function forceGarbageCollection() {
if (global.gc) {
global.gc();
}
}
describe('MyComponent', () => {
let container = null;
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
unmountComponentAtNode(container);
container.remove();
container = null;
forceGarbageCollection();
});
it('should not leak memory', async () => {
const initialMemory = performance.memory.usedJSHeapSize;
render(
ಈ ಉದಾಹರಣೆಯು ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ, ಅದನ್ನು ಅನ್‌ಮೌಂಟ್ ಮಾಡುತ್ತದೆ, ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ಅನ್ನು ಒತ್ತಾಯಿಸುತ್ತದೆ, ಮತ್ತು ನಂತರ ಮೆಮೊರಿ ಬಳಕೆಯು ಗಮನಾರ್ಹವಾಗಿ ಹೆಚ್ಚಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಗಮನಿಸಿ: ಕೆಲವು ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ performance.memory ಅನ್ನು ಅಸಮ್ಮತಿಸಲಾಗಿದೆ, ಅಗತ್ಯವಿದ್ದರೆ ಪರ್ಯಾಯಗಳನ್ನು ಪರಿಗಣಿಸಿ.
2. ಸೈಪ್ರೆಸ್ ಅಥವಾ ಸೆಲೆನಿಯಂನೊಂದಿಗೆ ಎಂಡ್-ಟು-ಎಂಡ್ ಟೆಸ್ಟ್‌ಗಳು
ಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ಅನುಕರಿಸುವ ಮೂಲಕ ಮತ್ತು ಕಾಲಾನಂತರದಲ್ಲಿ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವ ಮೂಲಕ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಎಂಡ್-ಟು-ಎಂಡ್ ಟೆಸ್ಟ್‌ಗಳನ್ನು ಸಹ ಬಳಸಬಹುದು.
ಸ್ವಯಂಚಾಲಿತ ಮೆಮೊರಿ ಲೀಕ್ ಪತ್ತೆಗಾಗಿ ಟೂಲ್‌ಗಳು
ಹಲವಾರು ಟೂಲ್‌ಗಳು ಮೆಮೊರಿ ಲೀಕ್ ಪತ್ತೆ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಲು ಸಹಾಯ ಮಾಡಬಹುದು:
- MemLab (ಫೇಸ್‌ಬುಕ್): ಒಂದು ಓಪನ್-ಸೋರ್ಸ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೆಮೊರಿ ಟೆಸ್ಟಿಂಗ್ ಫ್ರೇಮ್‌ವರ್ಕ್.
- LeakCanary (ಸ್ಕ್ವೇರ್ - ಆಂಡ್ರಾಯ್ಡ್, ಆದರೆ ಪರಿಕಲ್ಪನೆಗಳು ಅನ್ವಯಿಸುತ್ತವೆ): ಮುಖ್ಯವಾಗಿ ಆಂಡ್ರಾಯ್ಡ್‌ಗಾಗಿ ಆದರೂ, ಲೀಕ್ ಪತ್ತೆಯ ತತ್ವಗಳು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗೂ ಅನ್ವಯಿಸುತ್ತವೆ.
ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಡೀಬಗ್ ಮಾಡುವುದು: ಒಂದು ಹಂತ-ಹಂತದ ವಿಧಾನ
ನೀವು ಮೆಮೊರಿ ಲೀಕ್ ಅನ್ನು ಅನುಮಾನಿಸಿದಾಗ, ಸಮಸ್ಯೆಯನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಸರಿಪಡಿಸಲು ಈ ಹಂತಗಳನ್ನು ಅನುಸರಿಸಿ:
- ಲೀಕ್ ಅನ್ನು ಪುನರುತ್ಪಾದಿಸಿ: ಲೀಕ್ ಅನ್ನು ಪ್ರಚೋದಿಸುವ ನಿರ್ದಿಷ್ಟ ಬಳಕೆದಾರರ ಸಂವಹನಗಳು ಅಥವಾ ಕಾಂಪೊನೆಂಟ್ ಜೀವನಚಕ್ರಗಳನ್ನು ಗುರುತಿಸಿ.
- ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಿ: ಹೀಪ್ ಸ್ನ್ಯಾಪ್‌ಶಾಟ್‌ಗಳು ಮತ್ತು ಅಲೋಕೇಷನ್ ಟೈಮ್‌ಲೈನ್‌ಗಳನ್ನು ಸೆರೆಹಿಡಿಯಲು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳನ್ನು ಬಳಸಿ.
- ಲೀಕ್ ಆಗುತ್ತಿರುವ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಗುರುತಿಸಿ: ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟ್ ಆಗದ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಹುಡುಕಲು ಹೀಪ್ ಸ್ನ್ಯಾಪ್‌ಶಾಟ್‌ಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಿ.
- ಆಬ್ಜೆಕ್ಟ್ ರೆಫರೆನ್ಸ್‌ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಿ: ನಿಮ್ಮ ಕೋಡ್‌ನ ಯಾವ ಭಾಗಗಳು ಲೀಕ್ ಆಗುತ್ತಿರುವ ಆಬ್ಜೆಕ್ಟ್‌ಗಳಿಗೆ ರೆಫರೆನ್ಸ್‌ಗಳನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಂಡಿವೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸಿ.
- ಲೀಕ್ ಅನ್ನು ಸರಿಪಡಿಸಿ: ಸೂಕ್ತವಾದ ಕ್ಲೀನಪ್ ಲಾಜಿಕ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ (ಉದಾಹರಣೆಗೆ, ಟೈಮರ್‌ಗಳನ್ನು ತೆರವುಗೊಳಿಸುವುದು, ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದು, ಅಬ್ಸರ್ವೇಬಲ್‌ಗಳಿಂದ ಅನ್‌ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡುವುದು).
- ಸರಿಪಡಿಸಿದ್ದನ್ನು ಪರಿಶೀಲಿಸಿ: ಲೀಕ್ ಪರಿಹಾರವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಪ್ರೊಫೈಲಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪುನರಾವರ್ತಿಸಿ.
ತೀರ್ಮಾನ
ಮೆಮೊರಿ ಲೀಕ್‌ಗಳು ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸ್ಥಿರತೆಯ ಮೇಲೆ ಗಮನಾರ್ಹ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಮೆಮೊರಿ ಲೀಕ್‌ಗಳ ಸಾಮಾನ್ಯ ಕಾರಣಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ಕಾಂಪೊನೆಂಟ್ ಕ್ಲೀನಪ್‌ಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ಮತ್ತು ಸೂಕ್ತವಾದ ಪತ್ತೆ ಮತ್ತು ಡೀಬಗ್ಗಿಂಗ್ ಟೂಲ್‌ಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ, ಈ ಸಮಸ್ಯೆಗಳು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಬಳಕೆದಾರರ ಅನುಭವದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ತಡೆಯಬಹುದು. ನಿಯಮಿತ ಕೋಡ್ ವಿಮರ್ಶೆಗಳು, ಸಂಪೂರ್ಣ ಟೆಸ್ಟಿಂಗ್, ಮತ್ತು ಮೆಮೊರಿ ನಿರ್ವಹಣೆಗೆ ಒಂದು ಪೂರ್ವಭಾವಿ ವಿಧಾನವು ದೃಢವಾದ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅತ್ಯಗತ್ಯ. ನೆನಪಿಡಿ, ಚಿಕಿತ್ಸೆಗಿಂತ ತಡೆಗಟ್ಟುವಿಕೆ ಯಾವಾಗಲೂ ಉತ್ತಮ; ಆರಂಭದಿಂದಲೇ ಶ್ರದ್ಧೆಯಿಂದ ಕ್ಲೀನಪ್ ಮಾಡುವುದು ನಂತರದ ಡೀಬಗ್ಗಿಂಗ್ ಸಮಯವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಉಳಿಸುತ್ತದೆ.