ರಿಯಾಕ್ಟ್ ಸ್ವಯಂಚಾಲಿತ ಮೆಮೊರಿ ನಿರ್ವಹಣೆ: ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ಆಪ್ಟಿಮೈಸೇಶನ್

ರಿಯಾಕ್ಟ್, ಯೂಸರ್ ಇಂಟರ್‌ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಬಳಸುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿ, ತನ್ನ ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ಆರ್ಕಿಟೆಕ್ಚರ್ ಮತ್ತು ದಕ್ಷ ಅಪ್‌ಡೇಟ್ ಯಾಂತ್ರಿಕತೆಗಳಿಂದಾಗಿ ಹೆಚ್ಚು ಜನಪ್ರಿಯವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಯಾವುದೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಆಧಾರಿತ ಅಪ್ಲಿಕೇಶನ್‌ನಂತೆ, ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಸ್ವಯಂಚಾಲಿತ ಮೆಮೊರಿ ನಿರ್ವಹಣೆಯ ಮಿತಿಗಳಿಗೆ ಒಳಪಟ್ಟಿರುತ್ತವೆ, ಮುಖ್ಯವಾಗಿ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ಮೂಲಕ. ಈ ಪ್ರಕ್ರಿಯೆಯು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಹೇಗೆ ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು, ನಿಮ್ಮ ಸ್ಥಳ ಅಥವಾ ಹಿನ್ನೆಲೆಯನ್ನು ಲೆಕ್ಕಿಸದೆ, ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸ್ಪಂದನಾಶೀಲ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್, ರಿಯಾಕ್ಟ್‌ನ ಸ್ವಯಂಚಾಲಿತ ಮೆಮೊರಿ ನಿರ್ವಹಣೆ ಮತ್ತು ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗೆ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಒದಗಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿದೆ, ಮೂಲಭೂತ ಅಂಶಗಳಿಂದ ಹಿಡಿದು ಸುಧಾರಿತ ತಂತ್ರಗಳವರೆಗೆ ವಿವಿಧ ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

ಸ್ವಯಂಚಾಲಿತ ಮೆಮೊರಿ ನಿರ್ವಹಣೆ ಮತ್ತು ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

C ಅಥವಾ C++ ನಂತಹ ಭಾಷೆಗಳಲ್ಲಿ, ಡೆವಲಪರ್‌ಗಳು ಮೆಮೊರಿಯನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಹಂಚಿಕೆ ಮತ್ತು ಬಿಡುಗಡೆ ಮಾಡುವ ಜವಾಬ್ದಾರಿಯನ್ನು ಹೊಂದಿರುತ್ತಾರೆ. ಇದು ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ, ಆದರೆ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳು (ಬಳಕೆಯಾಗದ ಮೆಮೊರಿಯನ್ನು ಬಿಡುಗಡೆ ಮಾಡಲು ವಿಫಲವಾಗುವುದು) ಮತ್ತು ಡ್ಯಾಂಗ್ಲಿಂಗ್ ಪಾಯಿಂಟರ್‌ಗಳು (ಬಿಡುಗಡೆಯಾದ ಮೆಮೊರಿಯನ್ನು ಪ್ರವೇಶಿಸುವುದು) ಅಪಾಯವನ್ನು ಸಹ ಪರಿಚಯಿಸುತ್ತದೆ, ಇದು ಅಪ್ಲಿಕೇಶನ್ ಕ್ರ್ಯಾಶ್‌ಗಳು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅವನತಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ಮತ್ತು ಆದ್ದರಿಂದ ರಿಯಾಕ್ಟ್, ಸ್ವಯಂಚಾಲಿತ ಮೆಮೊರಿ ನಿರ್ವಹಣೆಯನ್ನು ಬಳಸುತ್ತದೆ, ಅಂದರೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಜಿನ್ (ಉದಾ., ಕ್ರೋಮ್‌ನ V8, ಫೈರ್‌ಫಾಕ್ಸ್‌ನ ಸ್ಪೈಡರ್‌ಮಂಕಿ) ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮೆಮೊರಿ ಹಂಚಿಕೆ ಮತ್ತು ಬಿಡುಗಡೆಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.

ಈ ಸ್ವಯಂಚಾಲಿತ ಪ್ರಕ್ರಿಯೆಯ ತಿರುಳು ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ (GC) ಆಗಿದೆ. ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟರ್ ನಿಯತಕಾಲಿಕವಾಗಿ ಅಪ್ಲಿಕೇಶನ್‌ನಿಂದ ಇನ್ನು ಮುಂದೆ ತಲುಪಲಾಗದ ಅಥವಾ ಬಳಸದ ಮೆಮೊರಿಯನ್ನು ಗುರುತಿಸಿ ಅದನ್ನು ಮರುಪಡೆಯುತ್ತದೆ. ಇದು ಅಪ್ಲಿಕೇಶನ್‌ನ ಇತರ ಭಾಗಗಳು ಬಳಸಲು ಮೆಮೊರಿಯನ್ನು ಮುಕ್ತಗೊಳಿಸುತ್ತದೆ. ಸಾಮಾನ್ಯ ಪ್ರಕ್ರಿಯೆಯು ಈ ಕೆಳಗಿನ ಹಂತಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ:

• ಗುರುತಿಸುವುದು (Marking): ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟರ್ ಎಲ್ಲಾ "ತಲುಪಬಹುದಾದ" ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಗುರುತಿಸುತ್ತದೆ. ಇವುಗಳು ಗ್ಲೋಬಲ್ ಸ್ಕೋಪ್, ಸಕ್ರಿಯ ಫಂಕ್ಷನ್‌ಗಳ ಕಾಲ್ ಸ್ಟ್ಯಾಕ್‌ಗಳು ಮತ್ತು ಇತರ ಸಕ್ರಿಯ ಆಬ್ಜೆಕ್ಟ್‌ಗಳಿಂದ ನೇರವಾಗಿ ಅಥವಾ ಪರೋಕ್ಷವಾಗಿ ಉಲ್ಲೇಖಿಸಲ್ಪಟ್ಟ ಆಬ್ಜೆಕ್ಟ್‌ಗಳಾಗಿವೆ.
• ಸ್ವೀಪಿಂಗ್ (Sweeping): ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟರ್ ಎಲ್ಲಾ "ತಲುಪಲಾಗದ" ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು (ಗಾರ್ಬೇಜ್) ಗುರುತಿಸುತ್ತದೆ – ಅಂದರೆ ಇನ್ನು ಮುಂದೆ ಉಲ್ಲೇಖಿಸದ ಆಬ್ಜೆಕ್ಟ್‌ಗಳು. ನಂತರ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟರ್ ಆ ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ಆಕ್ರಮಿಸಿಕೊಂಡಿರುವ ಮೆಮೊರಿಯನ್ನು ಬಿಡುಗಡೆ ಮಾಡುತ್ತದೆ.
• ಕಾಂಪ್ಯಾಕ್ಟಿಂಗ್ (ಐಚ್ಛಿಕ): ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟರ್ ಮೆಮೊರಿ ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಉಳಿದ ತಲುಪಬಹುದಾದ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಸಂಕ್ಷೇಪಿಸಬಹುದು.

ಮಾರ್ಕ್-ಅಂಡ್-ಸ್ವೀಪ್ ಅಲ್ಗಾರಿದಮ್, ಜನರೇಷನಲ್ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ಮತ್ತು ಇತರ ಹಲವು ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ಅಲ್ಗಾರಿದಮ್‌ಗಳು ಅಸ್ತಿತ್ವದಲ್ಲಿವೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಜಿನ್ ಬಳಸುವ ನಿರ್ದಿಷ್ಟ ಅಲ್ಗಾರಿದಮ್ ಒಂದು ಅನುಷ್ಠಾನದ ವಿವರವಾಗಿದೆ, ಆದರೆ ಬಳಕೆಯಾಗದ ಮೆಮೊರಿಯನ್ನು ಗುರುತಿಸಿ ಮತ್ತು ಮರುಪಡೆಯುವ ಸಾಮಾನ್ಯ ತತ್ವವು ಒಂದೇ ಆಗಿರುತ್ತದೆ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಜಿನ್‌ಗಳ ಪಾತ್ರ (V8, ಸ್ಪೈಡರ್‌ಮಂಕಿ)

ರಿಯಾಕ್ಟ್ ನೇರವಾಗಿ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ಅನ್ನು ನಿಯಂತ್ರಿಸುವುದಿಲ್ಲ; ಇದು ಬಳಕೆದಾರರ ಬ್ರೌಸರ್ ಅಥವಾ Node.js ಪರಿಸರದಲ್ಲಿನ ಆಧಾರವಾಗಿರುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಜಿನ್ ಅನ್ನು ಅವಲಂಬಿಸಿದೆ. ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಜಿನ್‌ಗಳು ಈ ಕೆಳಗಿನಂತಿವೆ:

• V8 (ಕ್ರೋಮ್, ಎಡ್ಜ್, Node.js): V8 ಅದರ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸುಧಾರಿತ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ತಂತ್ರಗಳಿಗೆ ಹೆಸರುವಾಸಿಯಾಗಿದೆ. ಇದು ಜನರೇಷನಲ್ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸುತ್ತದೆ, ಅದು ಹೀಪ್ ಅನ್ನು ಎರಡು ಮುಖ್ಯ ಪೀಳಿಗೆಗಳಾಗಿ ವಿಭಜಿಸುತ್ತದೆ: ಯುವ ಪೀಳಿಗೆ (ಅಲ್ಲಿ ಅಲ್ಪಾವಧಿಯ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಆಗಾಗ್ಗೆ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ) ಮತ್ತು ಹಳೆಯ ಪೀಳಿಗೆ (ಅಲ್ಲಿ ದೀರ್ಘಾವಧಿಯ ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ವಾಸಿಸುತ್ತವೆ).
• ಸ್ಪೈಡರ್‌ಮಂಕಿ (ಫೈರ್‌ಫಾಕ್ಸ್): ಸ್ಪೈಡರ್‌ಮಂಕಿ ಮತ್ತೊಂದು ಉನ್ನತ-ಕಾರ್ಯಕ್ಷಮತೆಯ ಇಂಜಿನ್ ಆಗಿದ್ದು, ಇದು ಜನರೇಷನಲ್ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟರ್‌ನೊಂದಿಗೆ ಇದೇ ರೀತಿಯ ವಿಧಾನವನ್ನು ಬಳಸುತ್ತದೆ.
• ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಕೋರ್ (ಸಫಾರಿ): ಸಫಾರಿಯಲ್ಲಿ ಮತ್ತು ಸಾಮಾನ್ಯವಾಗಿ iOS ಸಾಧನಗಳಲ್ಲಿ ಬಳಸಲಾಗುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಕೋರ್ ತನ್ನದೇ ಆದ ಆಪ್ಟಿಮೈಸ್ಡ್ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ತಂತ್ರಗಳನ್ನು ಹೊಂದಿದೆ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಂಜಿನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಗುಣಲಕ್ಷಣಗಳು, ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ವಿರಾಮಗಳನ್ನು ಒಳಗೊಂಡಂತೆ, ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಸ್ಪಂದನಶೀಲತೆಯ ಮೇಲೆ ಗಮನಾರ್ಹವಾಗಿ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಈ ವಿರಾಮಗಳ ಅವಧಿ ಮತ್ತು ಆವರ್ತನವು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಮತ್ತು ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟರ್ ಮೇಲಿನ ಹೊರೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಇದು ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳ ಸಾಮಾನ್ಯ ಕಾರಣಗಳು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಸ್ವಯಂಚಾಲಿತ ಮೆಮೊರಿ ನಿರ್ವಹಣೆಯು ಅಭಿವೃದ್ಧಿಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆಯಾದರೂ, ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳು ಇನ್ನೂ ಸಂಭವಿಸಬಹುದು. ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ಇನ್ನು ಮುಂದೆ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೂ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟರ್‌ನಿಂದ ತಲುಪಬಹುದಾದ ಸ್ಥಿತಿಯಲ್ಲಿ ಉಳಿದುಕೊಂಡಾಗ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳು ಸಂಭವಿಸುತ್ತವೆ, ಇದು ಅವುಗಳ ಬಿಡುಗಡೆಯನ್ನು ತಡೆಯುತ್ತದೆ. ಮೆಮೊರಿ ಲೀಕ್‌ಗಳ ಸಾಮಾನ್ಯ ಕಾರಣಗಳು ಇಲ್ಲಿವೆ:

• ಅನ್‌ಮೌಂಟ್ ಮಾಡದ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳು: ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು (ಉದಾ., `window.addEventListener`) ಸೇರಿಸುವುದು ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಅವುಗಳನ್ನು ತೆಗೆದುಹಾಕದಿರುವುದು ಲೀಕ್‌ಗಳ ಸಾಮಾನ್ಯ ಮೂಲವಾಗಿದೆ. ಈವೆಂಟ್ ಲಿಸನರ್ ಕಾಂಪೊನೆಂಟ್ ಅಥವಾ ಅದರ ಡೇಟಾಗೆ ಉಲ್ಲೇಖವನ್ನು ಹೊಂದಿದ್ದರೆ, ಆ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ.
• ತೆರವುಗೊಳಿಸದ ಟೈಮರ್‌ಗಳು ಮತ್ತು ಇಂಟರ್ವಲ್‌ಗಳು: ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳಂತೆಯೇ, `setTimeout`, `setInterval`, ಅಥವಾ `requestAnimationFrame` ಅನ್ನು ಬಳಸಿ, ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಅವುಗಳನ್ನು ತೆರವುಗೊಳಿಸದಿದ್ದರೆ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಈ ಟೈಮರ್‌ಗಳು ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಉಲ್ಲೇಖಗಳನ್ನು ಹೊಂದಿರುತ್ತವೆ, ಅದರ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ಅನ್ನು ತಡೆಯುತ್ತವೆ.
• ಕ್ಲೋಶರ್‌ಗಳು: ಹೊರಗಿನ ಫಂಕ್ಷನ್ ಕಾರ್ಯಗತಗೊಂಡು ಮುಗಿದ ನಂತರವೂ ಕ್ಲೋಶರ್‌ಗಳು ತಮ್ಮ ಲೆಕ್ಸಿಕಲ್ ಸ್ಕೋಪ್‌ನಲ್ಲಿರುವ ವೇರಿಯಬಲ್‌ಗಳಿಗೆ ಉಲ್ಲೇಖಗಳನ್ನು ಉಳಿಸಿಕೊಳ್ಳಬಹುದು. ಒಂದು ಕ್ಲೋಶರ್ ಕಾಂಪೊನೆಂಟ್‌ನ ಡೇಟಾವನ್ನು ಸೆರೆಹಿಡಿದರೆ, ಆ ಕಾಂಪೊನೆಂಟ್ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟ್ ಆಗದೇ ಇರಬಹುದು.
• ವೃತ್ತಾಕಾರದ ಉಲ್ಲೇಖಗಳು: ಎರಡು ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ಪರಸ್ಪರ ಉಲ್ಲೇಖಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ವೃತ್ತಾಕಾರದ ಉಲ್ಲೇಖವು ಸೃಷ್ಟಿಯಾಗುತ್ತದೆ. ಬೇರೆಲ್ಲಿಯೂ ಎರಡೂ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ನೇರವಾಗಿ ಉಲ್ಲೇಖಿಸದಿದ್ದರೂ, ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟರ್ ಅವು ಗಾರ್ಬೇಜ್ ಹೌದೋ ಅಲ್ಲವೋ ಎಂದು ನಿರ್ಧರಿಸಲು ಹೆಣಗಾಡಬಹುದು ಮತ್ತು ಅವುಗಳನ್ನು ಉಳಿಸಿಕೊಳ್ಳಬಹುದು.
• ದೊಡ್ಡ ಡೇಟಾ ರಚನೆಗಳು: ಕಾಂಪೊನೆಂಟ್ ಸ್ಟೇಟ್ ಅಥವಾ ಪ್ರಾಪ್ಸ್‌ನಲ್ಲಿ ಅತಿಯಾದ ದೊಡ್ಡ ಡೇಟಾ ರಚನೆಗಳನ್ನು ಸಂಗ್ರಹಿಸುವುದು ಮೆಮೊರಿ ಖಾಲಿಯಾಗಲು ಕಾರಣವಾಗಬಹುದು.
• `useMemo` ಮತ್ತು `useCallback` ನ ದುರುಪಯೋಗ: ಈ ಹುಕ್‌ಗಳು ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ಉದ್ದೇಶಿಸಲಾಗಿದ್ದರೂ, ಅವುಗಳನ್ನು ತಪ್ಪಾಗಿ ಬಳಸಿದರೆ ಅನಗತ್ಯ ಆಬ್ಜೆಕ್ಟ್ ರಚನೆಗೆ ಕಾರಣವಾಗಬಹುದು ಅಥವಾ ಅವು ಅವಲಂಬನೆಗಳನ್ನು ತಪ್ಪಾಗಿ ಸೆರೆಹಿಡಿದರೆ ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟ್ ಆಗುವುದನ್ನು ತಡೆಯಬಹುದು.
• ಅಸಮರ್ಪಕ DOM ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್: ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ DOM ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ರಚಿಸುವುದು ಅಥವಾ ನೇರವಾಗಿ DOM ಅನ್ನು ಮಾರ್ಪಡಿಸುವುದು, ಎಚ್ಚರಿಕೆಯಿಂದ ನಿರ್ವಹಿಸದಿದ್ದರೆ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ಸ್ವಚ್ಛಗೊಳಿಸದ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಿದಾಗ.

ಈ ಸಮಸ್ಯೆಗಳು ನಿಮ್ಮ ಪ್ರದೇಶವನ್ನು ಲೆಕ್ಕಿಸದೆ ಪ್ರಸ್ತುತವಾಗಿವೆ. ಮೆಮೊರಿ ಲೀಕ್‌ಗಳು ಜಾಗತಿಕವಾಗಿ ಬಳಕೆದಾರರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು, ಇದು ನಿಧಾನವಾದ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಕಳಪೆ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ. ಈ ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುವುದು ಎಲ್ಲರಿಗೂ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕೊಡುಗೆ ನೀಡುತ್ತದೆ.

ಮೆಮೊರಿ ಲೀಕ್ ಪತ್ತೆ ಮತ್ತು ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ಪರಿಕರಗಳು ಮತ್ತು ತಂತ್ರಗಳು

ಅದೃಷ್ಟವಶಾತ್, ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ಸರಿಪಡಿಸಲು ಹಾಗೂ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಹಲವಾರು ಪರಿಕರಗಳು ಮತ್ತು ತಂತ್ರಗಳು ಸಹಾಯ ಮಾಡುತ್ತವೆ:

• ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು: ಕ್ರೋಮ್, ಫೈರ್‌ಫಾಕ್ಸ್ ಮತ್ತು ಇತರ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿನ ಅಂತರ್ನಿರ್ಮಿತ ಡೆವಲಪರ್ ಪರಿಕರಗಳು ಅಮೂಲ್ಯವಾಗಿವೆ. ಅವು ಮೆಮೊರಿ ಪ್ರೊಫೈಲಿಂಗ್ ಪರಿಕರಗಳನ್ನು ನೀಡುತ್ತವೆ, ಅದು ನಿಮಗೆ ಇದನ್ನು ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ:
  • ಹೀಪ್ ಸ್ನ್ಯಾಪ್‌ಶಾಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ: ನಿರ್ದಿಷ್ಟ ಸಮಯದಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಹೀಪ್‌ನ ಸ್ಥಿತಿಯನ್ನು ಸೆರೆಹಿಡಿಯಿರಿ. ಸಂಗ್ರಹವಾಗುತ್ತಿರುವ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಗುರುತಿಸಲು ಹೀಪ್ ಸ್ನ್ಯಾಪ್‌ಶಾಟ್‌ಗಳನ್ನು ಹೋಲಿಕೆ ಮಾಡಿ.
  • ಟೈಮ್‌ಲೈನ್ ಪ್ರೊಫೈಲ್‌ಗಳನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಿ: ಕಾಲಾನಂತರದಲ್ಲಿ ಮೆಮೊರಿ ಹಂಚಿಕೆ ಮತ್ತು ಬಿಡುಗಡೆಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿ. ಮೆಮೊರಿ ಲೀಕ್‌ಗಳು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಿ.
  • ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ: ಮಾದರಿಗಳು ಮತ್ತು ಸುಧಾರಣೆಯ ಕ್ಷೇತ್ರಗಳನ್ನು ಗುರುತಿಸಲು ಕಾಲಾನಂತರದಲ್ಲಿ ಅಪ್ಲಿಕೇಶನ್‌ನ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿ.

  ಈ ಪ್ರಕ್ರಿಯೆಯು ಸಾಮಾನ್ಯವಾಗಿ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ತೆರೆಯುವುದು (ಸಾಮಾನ್ಯವಾಗಿ ರೈಟ್-ಕ್ಲಿಕ್ ಮಾಡಿ "Inspect" ಆಯ್ಕೆ ಮಾಡುವ ಮೂಲಕ ಅಥವಾ F12 ನಂತಹ ಕೀಬೋರ್ಡ್ ಶಾರ್ಟ್‌ಕಟ್ ಬಳಸಿ), "Memory" ಅಥವಾ "Performance" ಟ್ಯಾಬ್‌ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವುದು, ಮತ್ತು ಸ್ನ್ಯಾಪ್‌ಶಾಟ್‌ಗಳು ಅಥವಾ ರೆಕಾರ್ಡಿಂಗ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ನಂತರ ಈ ಪರಿಕರಗಳು ನಿರ್ದಿಷ್ಟ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಮತ್ತು ಅವುಗಳನ್ನು ಹೇಗೆ ಉಲ್ಲೇಖಿಸಲಾಗುತ್ತಿದೆ ಎಂಬುದನ್ನು ನೋಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತವೆ.

• ರಿಯಾಕ್ಟ್ ಡೆವ್‌ಟೂಲ್ಸ್: ರಿಯಾಕ್ಟ್ ಡೆವ್‌ಟೂಲ್ಸ್ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯು ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀ ಬಗ್ಗೆ ಮೌಲ್ಯಯುತವಾದ ಒಳನೋಟಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದರಲ್ಲಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಹೇಗೆ ರೆಂಡರ್ ಆಗುತ್ತಿವೆ ಮತ್ತು ಅವುಗಳ ಪ್ರಾಪ್ಸ್ ಮತ್ತು ಸ್ಟೇಟ್ ಸೇರಿವೆ. ನೇರವಾಗಿ ಮೆಮೊರಿ ಪ್ರೊಫೈಲಿಂಗ್‌ಗಾಗಿ ಅಲ್ಲದಿದ್ದರೂ, ಇದು ಮೆಮೊರಿ-ಸಂಬಂಧಿತ ಸಮಸ್ಯೆಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುವ ಕಾಂಪೊನೆಂಟ್ ಸಂಬಂಧಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸಹಾಯಕವಾಗಿದೆ.
• ಮೆಮೊರಿ ಪ್ರೊಫೈಲಿಂಗ್ ಲೈಬ್ರರಿಗಳು ಮತ್ತು ಪ್ಯಾಕೇಜ್‌ಗಳು: ಹಲವಾರು ಲೈಬ್ರರಿಗಳು ಮತ್ತು ಪ್ಯಾಕೇಜ್‌ಗಳು ಮೆಮೊರಿ ಲೀಕ್ ಪತ್ತೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಲು ಅಥವಾ ಹೆಚ್ಚು ಸುಧಾರಿತ ಪ್ರೊಫೈಲಿಂಗ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒದಗಿಸಲು ಸಹಾಯ ಮಾಡಬಹುದು. ಉದಾಹರಣೆಗಳು ಈ ಕೆಳಗಿನಂತಿವೆ:
  • `why-did-you-render`: ಈ ಲೈಬ್ರರಿಯು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಗುರುತಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು ಮತ್ತು ಸಂಭಾವ್ಯವಾಗಿ ಮೆಮೊರಿ ಸಮಸ್ಯೆಗಳನ್ನು ಉಲ್ಬಣಗೊಳಿಸಬಹುದು.
  • `react-perf-tool`: ರೆಂಡರಿಂಗ್ ಸಮಯ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳಿಗೆ ಸಂಬಂಧಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್ಸ್ ಮತ್ತು ವಿಶ್ಲೇಷಣೆಯನ್ನು ನೀಡುತ್ತದೆ.
  • `memory-leak-finder` ಅಥವಾ ಅಂತಹುದೇ ಪರಿಕರಗಳು: ಕೆಲವು ಲೈಬ್ರರಿಗಳು ಆಬ್ಜೆಕ್ಟ್ ಉಲ್ಲೇಖಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು ಸಂಭಾವ್ಯ ಲೀಕ್‌ಗಳನ್ನು ಗುರುತಿಸುವ ಮೂಲಕ ನಿರ್ದಿಷ್ಟವಾಗಿ ಮೆಮೊರಿ ಲೀಕ್ ಪತ್ತೆಯನ್ನು ನಿಭಾಯಿಸುತ್ತವೆ.
• ಕೋಡ್ ವಿಮರ್ಶೆ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು: ಕೋಡ್ ವಿಮರ್ಶೆಗಳು ನಿರ್ಣಾಯಕವಾಗಿವೆ. ನಿಯಮಿತವಾಗಿ ಕೋಡ್ ಅನ್ನು ವಿಮರ್ಶಿಸುವುದರಿಂದ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ಹಿಡಿಯಬಹುದು ಮತ್ತು ಕೋಡ್ ಗುಣಮಟ್ಟವನ್ನು ಸುಧಾರಿಸಬಹುದು. ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಸ್ಥಿರವಾಗಿ ಜಾರಿಗೊಳಿಸಿ:
• ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಅನ್‌ಮೌಂಟ್ ಮಾಡಿ: `useEffect` ನಲ್ಲಿ ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ, ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟ್ ಮಾಡುವಾಗ ಸೇರಿಸಲಾದ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸಿ. ಉದಾಹರಣೆ:

              
      useEffect(() => {
          const handleResize = () => { /* ... */ };
          window.addEventListener('resize', handleResize);
          return () => {
              window.removeEventListener('resize', handleResize);
          };
      }, []);
      
              
  
                
                  Copy
                
              
            

• ಟೈಮರ್‌ಗಳನ್ನು ತೆರವುಗೊಳಿಸಿ: `clearInterval` ಅಥವಾ `clearTimeout` ಬಳಸಿ ಟೈಮರ್‌ಗಳನ್ನು ತೆರವುಗೊಳಿಸಲು `useEffect` ನಲ್ಲಿನ ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ಬಳಸಿ. ಉದಾಹರಣೆ:

              
      useEffect(() => {
          const timerId = setInterval(() => { /* ... */ }, 1000);
          return () => {
              clearInterval(timerId);
          };
      }, []);
      
              
  
                
                  Copy
                
              
            

• ಅನಗತ್ಯ ಅವಲಂಬನೆಗಳೊಂದಿಗೆ ಕ್ಲೋಶರ್‌ಗಳನ್ನು ತಪ್ಪಿಸಿ: ಕ್ಲೋಶರ್‌ಗಳು ಯಾವ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಸೆರೆಹಿಡಿಯುತ್ತವೆ ಎಂಬುದರ ಬಗ್ಗೆ ಗಮನವಿರಲಿ. ದೊಡ್ಡ ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ಅಥವಾ ಅನಗತ್ಯ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಸೆರೆಹಿಡಿಯುವುದನ್ನು ತಪ್ಪಿಸಿ, ವಿಶೇಷವಾಗಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಲ್ಲಿ.
• `useMemo` ಮತ್ತು `useCallback` ಅನ್ನು ಕಾರ್ಯತಂತ್ರವಾಗಿ ಬಳಸಿ: ಈ ಹುಕ್‌ಗಳನ್ನು ದುಬಾರಿ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಮೆಮೊಯೈಸ್ ಮಾಡಲು ಅಥವಾ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಅವಲಂಬನೆಗಳಾಗಿರುವ ಫಂಕ್ಷನ್ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಮೆಮೊಯೈಸ್ ಮಾಡಲು ಬಳಸಿ, ಕೇವಲ ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ, ಮತ್ತು ಅವುಗಳ ಅವಲಂಬನೆಗಳಿಗೆ ಎಚ್ಚರಿಕೆಯಿಂದ ಗಮನ ಕೊಡಿ. ಅವು ನಿಜವಾಗಿಯೂ ಯಾವಾಗ ಪ್ರಯೋಜನಕಾರಿ ಎಂದು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ ಅಕಾಲಿಕ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ತಪ್ಪಿಸಿ.
• ಡೇಟಾ ರಚನೆಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: ಉದ್ದೇಶಿತ ಕಾರ್ಯಾಚರಣೆಗಳಿಗೆ ದಕ್ಷವಾಗಿರುವ ಡೇಟಾ ರಚನೆಗಳನ್ನು ಬಳಸಿ. ಅನಿರೀಕ್ಷಿತ ರೂಪಾಂತರಗಳನ್ನು ತಡೆಯಲು ಇಮ್ಮ್ಯೂಟಬಲ್ ಡೇಟಾ ರಚನೆಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ಸ್ಟೇಟ್ ಮತ್ತು ಪ್ರಾಪ್ಸ್‌ನಲ್ಲಿ ದೊಡ್ಡ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಿ: ಕಾಂಪೊನೆಂಟ್ ಸ್ಟೇಟ್ ಮತ್ತು ಪ್ರಾಪ್ಸ್‌ನಲ್ಲಿ ಕೇವಲ ಅಗತ್ಯ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಿ. ಒಂದು ಕಾಂಪೊನೆಂಟ್ ದೊಡ್ಡ ಡೇಟಾಸೆಟ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಬೇಕಾದರೆ, ಪೇಜಿನೇಶನ್ ಅಥವಾ ವರ್ಚುವಲೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಪರಿಗಣಿಸಿ, ಇದು ಒಂದು ಸಮಯದಲ್ಲಿ ಡೇಟಾದ ಗೋಚರ ಉಪವಿಭಾಗವನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡುತ್ತದೆ.
• ಕಾರ್ಯಕ್ಷಮತೆ ಪರೀಕ್ಷೆ: ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಮತ್ತು ಕೋಡ್ ಬದಲಾವಣೆಗಳ ನಂತರ ಯಾವುದೇ ಕಾರ್ಯಕ್ಷಮತೆಯ ಹಿನ್ನಡೆಯನ್ನು ಗುರುತಿಸಲು, ನಿಯಮಿತವಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆ ಪರೀಕ್ಷೆಯನ್ನು ನಡೆಸಿ, ಆದರ್ಶಪ್ರಾಯವಾಗಿ ಸ್ವಯಂಚಾಲಿತ ಪರಿಕರಗಳೊಂದಿಗೆ.

ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗಾಗಿ ನಿರ್ದಿಷ್ಟ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳು

ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ತಡೆಯುವುದರ ಜೊತೆಗೆ, ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳೊಳಗೆ ಮೆಮೊರಿ ದಕ್ಷತೆಯನ್ನು ಸುಧಾರಿಸಲು ಮತ್ತು ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ಒತ್ತಡವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಹಲವಾರು ತಂತ್ರಗಳಿವೆ:

• ಕಾಂಪೊನೆಂಟ್ ಮೆಮೊಯೈಸೇಶನ್: ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಮೆಮೊಯೈಸ್ ಮಾಡಲು `React.memo` ಬಳಸಿ. ಇದು ಕಾಂಪೊನೆಂಟ್‌ನ ಪ್ರಾಪ್ಸ್ ಬದಲಾಗದಿದ್ದರೆ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯುತ್ತದೆ. ಇದು ಅನಗತ್ಯ ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್‌ಗಳು ಮತ್ತು ಅದಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಮೆಮೊರಿ ಹಂಚಿಕೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.

              
    const MyComponent = React.memo(function MyComponent(props) { /* ... */ });
    
              
  
                
                  Copy
                
              
            

• `useCallback` ನೊಂದಿಗೆ ಫಂಕ್ಷನ್ ಪ್ರಾಪ್ಸ್‌ಗಳನ್ನು ಮೆಮೊಯೈಸ್ ಮಾಡುವುದು: ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ರವಾನಿಸಲಾದ ಫಂಕ್ಷನ್ ಪ್ರಾಪ್ಸ್‌ಗಳನ್ನು ಮೆಮೊಯೈಸ್ ಮಾಡಲು `useCallback` ಬಳಸಿ. ಇದು ಫಂಕ್ಷನ್‌ನ ಅವಲಂಬನೆಗಳು ಬದಲಾದಾಗ ಮಾತ್ರ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

              
    const handleClick = useCallback(() => { /* ... */ }, [dependency1, dependency2]);
    
              
  
                
                  Copy
                
              
            

• `useMemo` ನೊಂದಿಗೆ ಮೌಲ್ಯಗಳನ್ನು ಮೆಮೊಯೈಸ್ ಮಾಡುವುದು: ದುಬಾರಿ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಮೆಮೊಯೈಸ್ ಮಾಡಲು ಮತ್ತು ಅವಲಂಬನೆಗಳು ಬದಲಾಗದೆ ಉಳಿದಿದ್ದರೆ ಮರು-ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ತಡೆಯಲು `useMemo` ಬಳಸಿ. ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೆ ಅತಿಯಾದ ಮೆಮೊಯೈಸೇಶನ್ ಅನ್ನು ತಪ್ಪಿಸಲು `useMemo` ಬಳಸುವಾಗ ಜಾಗರೂಕರಾಗಿರಿ. ಇದು ಹೆಚ್ಚುವರಿ ಓವರ್‌ಹೆಡ್ ಅನ್ನು ಸೇರಿಸಬಹುದು.

              
    const calculatedValue = useMemo(() => { /* Expensive calculation */ }, [dependency1, dependency2]);
    
              
  
                
                  Copy
                
              
            

• `useMemo` ಮತ್ತು `useCallback` ನೊಂದಿಗೆ ರೆಂಡರ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು:** `useMemo` ಮತ್ತು `useCallback` ಅನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು ಎಂಬುದನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಪರಿಗಣಿಸಿ. ಅವುಗಳನ್ನು ಅತಿಯಾಗಿ ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ ಏಕೆಂದರೆ ಅವುಗಳು ಕೂಡ ಓವರ್‌ಹೆಡ್ ಅನ್ನು ಸೇರಿಸುತ್ತವೆ, ವಿಶೇಷವಾಗಿ ಬಹಳಷ್ಟು ಸ್ಟೇಟ್ ಬದಲಾವಣೆಗಳನ್ನು ಹೊಂದಿರುವ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ.
• ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಮತ್ತು ಲೇಜಿ ಲೋಡಿಂಗ್: ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮತ್ತು ಕೋಡ್ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಲೋಡ್ ಮಾಡಿ. ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಮತ್ತು ಲೇಜಿ ಲೋಡಿಂಗ್ ಆರಂಭಿಕ ಬಂಡಲ್ ಗಾತ್ರ ಮತ್ತು ಮೆಮೊರಿ ಫುಟ್‌ಪ್ರಿಂಟ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯ ಮತ್ತು ಸ್ಪಂದನಶೀಲತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ. ರಿಯಾಕ್ಟ್ `React.lazy` ಮತ್ತು `` ನೊಂದಿಗೆ ಅಂತರ್ನಿರ್ಮಿತ ಪರಿಹಾರಗಳನ್ನು ನೀಡುತ್ತದೆ. ಅಪ್ಲಿಕೇಶನ್‌ನ ಭಾಗಗಳನ್ನು ಬೇಡಿಕೆಯ ಮೇಲೆ ಲೋಡ್ ಮಾಡಲು ಡೈನಾಮಿಕ್ `import()` ಸ್ಟೇಟ್‌ಮೆಂಟ್ ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

              
     const MyComponent = React.lazy(() => import('./MyComponent'));
     
     function App() {
         return (
             Loading...

  }> ); }
  Copy