ಉನ್ನತ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುವುದು: ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲರ್ API ಕುರಿತು ಆಳವಾದ ನೋಟ

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

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

ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲರ್ API ಎಂದರೇನು?

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

ಇದು ಈ ರೀತಿಯ ನಿರ್ಣಾಯಕ ಪ್ರಶ್ನೆಗಳಿಗೆ ಉತ್ತರಿಸುತ್ತದೆ:

• ಒಂದು ನಿರ್ದಿಷ್ಟ ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರ್ ಆಗಲು ಎಷ್ಟು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ?
• ಬಳಕೆದಾರರ ಸಂವಹನದ ಸಮಯದಲ್ಲಿ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಎಷ್ಟು ಬಾರಿ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ?
• ಒಂದು ನಿರ್ದಿಷ್ಟ ಕಾಂಪೊನೆಂಟ್ ಏಕೆ ಮರು-ರೆಂಡರ್ ಆಯಿತು?

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

ಪ್ರೊಫೈಲರ್ ಮುಖ್ಯವಾಗಿ ಎರಡು ರೂಪಗಳಲ್ಲಿ ಲಭ್ಯವಿದೆ:

1. ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಎಕ್ಸ್‌ಟೆನ್ಶನ್: ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಟೂಲ್ಸ್‌ಗೆ ನೇರವಾಗಿ ಸಂಯೋಜಿಸಲಾದ ಬಳಕೆದಾರ-ಸ್ನೇಹಿ, ಗ್ರಾಫಿಕಲ್ ಇಂಟರ್ಫೇಸ್. ಪ್ರೊಫೈಲಿಂಗ್ ಪ್ರಾರಂಭಿಸಲು ಇದು ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮಾರ್ಗವಾಗಿದೆ.
2. ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ `` ಕಾಂಪೊನೆಂಟ್: ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮಾಪನಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ನಿಮ್ಮ JSX ಕೋಡ್‌ಗೆ ನೇರವಾಗಿ ಸೇರಿಸಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್, ಇದು ಸ್ವಯಂಚಾಲಿತ ಪರೀಕ್ಷೆ ಅಥವಾ ಅನಾಲಿಟಿಕ್ಸ್ ಸೇವೆಗೆ ಮೆಟ್ರಿಕ್ಸ್ ಕಳುಹಿಸಲು ಉಪಯುಕ್ತವಾಗಿದೆ.

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

ಪ್ರಾರಂಭಿಸುವುದು: ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲರ್ ಅನ್ನು ಬಳಸುವುದು ಹೇಗೆ

ನಾವು ಪ್ರಾಯೋಗಿಕವಾಗಿ ನೋಡೋಣ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡುವುದು ಒಂದು ಸರಳ ಪ್ರಕ್ರಿಯೆಯಾಗಿದೆ, ಮತ್ತು ಎರಡೂ ವಿಧಾನಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ನಿಮಗೆ ಗರಿಷ್ಠ ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತದೆ.

ವಿಧಾನ 1: ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಪ್ರೊಫೈಲರ್ ಟ್ಯಾಬ್

ಹೆಚ್ಚಿನ ದಿನನಿತ್ಯದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೀಬಗ್ಗಿಂಗ್‌ಗಾಗಿ, ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್‌ನಲ್ಲಿನ ಪ್ರೊಫೈಲರ್ ಟ್ಯಾಬ್ ನಿಮ್ಮ ಮುಖ್ಯ ಸಾಧನವಾಗಿದೆ. ನೀವು ಅದನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡದಿದ್ದರೆ, ಅದು ಮೊದಲ ಹಂತ—ನಿಮ್ಮ ಆಯ್ಕೆಯ ಬ್ರೌಸರ್‌ಗೆ (ಕ್ರೋಮ್, ಫೈರ್‌ಫಾಕ್ಸ್, ಎಡ್ಜ್) ಎಕ್ಸ್‌ಟೆನ್ಶನ್ ಪಡೆಯಿರಿ.

ನಿಮ್ಮ ಮೊದಲ ಪ್ರೊಫೈಲಿಂಗ್ ಸೆಶನ್ ಅನ್ನು ಚಲಾಯಿಸಲು ಹಂತ-ಹಂತದ ಮಾರ್ಗದರ್ಶಿ ಇಲ್ಲಿದೆ:

1. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ತೆರೆಯಿರಿ: ಡೆವಲಪ್‌ಮೆಂಟ್ ಮೋಡ್‌ನಲ್ಲಿ ಚಾಲನೆಯಲ್ಲಿರುವ ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿ. ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಎಕ್ಸ್‌ಟೆನ್ಶನ್ ಬಾರ್‌ನಲ್ಲಿ ರಿಯಾಕ್ಟ್ ಐಕಾನ್ ನೋಡಿದರೆ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಸಕ್ರಿಯವಾಗಿದೆ ಎಂದು ನಿಮಗೆ ತಿಳಿಯುತ್ತದೆ.
2. ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ತೆರೆಯಿರಿ: ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ತೆರೆಯಿರಿ (ಸಾಮಾನ್ಯವಾಗಿ F12 ಅಥವಾ Ctrl+Shift+I / Cmd+Option+I ನೊಂದಿಗೆ) ಮತ್ತು "Profiler" ಟ್ಯಾಬ್ ಅನ್ನು ಹುಡುಕಿ. ನೀವು ಅನೇಕ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ಅದು "»" ಬಾಣದ ಗುರುತಿನ ಹಿಂದೆ ಅಡಗಿರಬಹುದು.
3. ಪ್ರೊಫೈಲಿಂಗ್ ಪ್ರಾರಂಭಿಸಿ: ಪ್ರೊಫೈಲರ್ UI ನಲ್ಲಿ ನೀವು ನೀಲಿ ವೃತ್ತವನ್ನು (ರೆಕಾರ್ಡ್ ಬಟನ್) ನೋಡುತ್ತೀರಿ. ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾವನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಲು ಅದರ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ.
4. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಿ: ನೀವು ಅಳೆಯಲು ಬಯಸುವ ಕ್ರಿಯೆಯನ್ನು ಮಾಡಿ. ಇದು ಪುಟವನ್ನು ಲೋಡ್ ಮಾಡುವುದು, ಮೋಡಲ್ ತೆರೆಯುವ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವುದು, ಫಾರ್ಮ್‌ನಲ್ಲಿ ಟೈಪ್ ಮಾಡುವುದು, ಅಥವಾ ದೊಡ್ಡ ಪಟ್ಟಿಯನ್ನು ಫಿಲ್ಟರ್ ಮಾಡುವುದು ಯಾವುದಾದರೂ ಆಗಿರಬಹುದು. ನಿಧಾನವೆನಿಸುವ ಬಳಕೆದಾರರ ಸಂವಹನವನ್ನು ಪುನರುತ್ಪಾದಿಸುವುದು ಗುರಿಯಾಗಿದೆ.
5. ಪ್ರೊಫೈಲಿಂಗ್ ನಿಲ್ಲಿಸಿ: ನೀವು ಸಂವಹನವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ಸೆಶನ್ ಅನ್ನು ನಿಲ್ಲಿಸಲು ಮತ್ತೆ ರೆಕಾರ್ಡ್ ಬಟನ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ (ಅದು ಈಗ ಕೆಂಪು ಬಣ್ಣದಲ್ಲಿರುತ್ತದೆ).

ಅಷ್ಟೇ! ಪ್ರೊಫೈಲರ್ ತಾನು ಸಂಗ್ರಹಿಸಿದ ಡೇಟಾವನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಆ ಸಂವಹನದ ಸಮಯದಲ್ಲಿ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ರೆಂಡರ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ವಿವರವಾದ ದೃಶ್ಯೀಕರಣವನ್ನು ನಿಮಗೆ ಒದಗಿಸುತ್ತದೆ.

ವಿಧಾನ 2: ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ `Profiler` ಕಾಂಪೊನೆಂಟ್

ಸಂವಾದಾತ್ಮಕ ಡೀಬಗ್ಗಿಂಗ್‌ಗಾಗಿ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಉತ್ತಮವಾಗಿದ್ದರೂ, ಕೆಲವೊಮ್ಮೆ ನೀವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಬೇಕಾಗುತ್ತದೆ. `react` ಪ್ಯಾಕೇಜ್‌ನಿಂದ ರಫ್ತು ಮಾಡಲಾದ `` ಕಾಂಪೊನೆಂಟ್ ನಿಮಗೆ ಅದನ್ನು ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ.

ನೀವು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯ ಯಾವುದೇ ಭಾಗವನ್ನು `` ಕಾಂಪೊನೆಂಟ್‌ನೊಂದಿಗೆ ಸುತ್ತುವರಿಯಬಹುದು. ಇದಕ್ಕೆ ಎರಡು ಪ್ರಾಪ್ಸ್ ಅಗತ್ಯವಿದೆ:

• `id` (ಸ್ಟ್ರಿಂಗ್): ನೀವು ಪ್ರೊಫೈಲ್ ಮಾಡುತ್ತಿರುವ ಟ್ರೀಯ ಭಾಗಕ್ಕೆ ಒಂದು ಅನನ್ಯ ಗುರುತಿಸುವಿಕೆ. ಇದು ವಿಭಿನ್ನ ಪ್ರೊಫೈಲರ್‌ಗಳಿಂದ ಮಾಪನಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
• `onRender` (ಫಂಕ್ಷನ್): ಪ್ರೊಫೈಲ್ ಮಾಡಿದ ಟ್ರೀಯೊಳಗಿನ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅಪ್‌ಡೇಟ್ ಅನ್ನು "ಕಮಿಟ್" ಮಾಡಿದಾಗಲೆಲ್ಲಾ ರಿಯಾಕ್ಟ್ ಕರೆಯುವ ಒಂದು ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್.

ಇಲ್ಲಿ ಒಂದು ಕೋಡ್ ಉದಾಹರಣೆ ಇದೆ:

import React, { Profiler } from 'react';

// onRender ಕಾಲ್‌ಬ್ಯಾಕ್
function onRenderCallback(
  id, // ಇದೀಗ ಕಮಿಟ್ ಆದ ಪ್ರೊಫೈಲರ್ ಟ್ರೀಯ "id" ಪ್ರಾಪ್
  phase, // "mount" (ಟ್ರೀ ಇದೀಗ ಮೌಂಟ್ ಆಗಿದ್ದರೆ) ಅಥವಾ "update" (ಅದು ಮರು-ರೆಂಡರ್ ಆಗಿದ್ದರೆ)
  actualDuration, // ಕಮಿಟ್ ಆದ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡಲು ತೆಗೆದುಕೊಂಡ ಸಮಯ
  baseDuration, // ಮೆಮೋಯೈಸೇಶನ್ ಇಲ್ಲದೆ ಸಂಪೂರ್ಣ ಸಬ್‌ಟ್ರೀಯನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಅಂದಾಜು ಸಮಯ
  startTime, // ರಿಯಾಕ್ಟ್ ಈ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿದಾಗ
  commitTime, // ರಿಯಾಕ್ಟ್ ಈ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ಕಮಿಟ್ ಮಾಡಿದಾಗ
  interactions // ಅಪ್‌ಡೇಟ್ ಅನ್ನು ಪ್ರಚೋದಿಸಿದ ಸಂವಹನಗಳ ಒಂದು ಸೆಟ್
) {
  // ನೀವು ಈ ಡೇಟಾವನ್ನು ಲಾಗ್ ಮಾಡಬಹುದು, ಅದನ್ನು ಅನಾಲಿಟಿಕ್ಸ್ ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗೆ ಕಳುಹಿಸಬಹುದು, ಅಥವಾ ಅದನ್ನು ಒಟ್ಟುಗೂಡಿಸಬಹುದು.
  console.log({
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime,
  });
}

function App() {
  return (
    

      
        
      
      

        
          
        
      
    
  );
}

`onRender` ಕಾಲ್‌ಬ್ಯಾಕ್ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:

• `id`: ನೀವು `` ಕಾಂಪೊನೆಂಟ್‌ಗೆ ನೀಡಿದ ಸ್ಟ್ರಿಂಗ್ `id`.
• `phase`: "mount" (ಕಾಂಪೊನೆಂಟ್ ಮೊದಲ ಬಾರಿಗೆ ಮೌಂಟ್ ಆದಾಗ) ಅಥವಾ "update" (ಪ್ರಾಪ್ಸ್, ಸ್ಟೇಟ್, ಅಥವಾ ಹುಕ್ಸ್‌ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳಿಂದಾಗಿ ಅದು ಮರು-ರೆಂಡರ್ ಆದಾಗ).
• `actualDuration`: ಈ ನಿರ್ದಿಷ್ಟ ಅಪ್‌ಡೇಟ್‌ಗಾಗಿ `` ಮತ್ತು ಅದರ ಡಿಸೆಂಡೆಂಟ್ಸ್‌ ಅನ್ನು ರೆಂಡರ್ ಮಾಡಲು ತೆಗೆದುಕೊಂಡ ಸಮಯ, ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಲ್ಲಿ. ನಿಧಾನಗತಿಯ ರೆಂಡರ್‌ಗಳನ್ನು ಗುರುತಿಸಲು ಇದು ನಿಮ್ಮ ಪ್ರಮುಖ ಮೆಟ್ರಿಕ್ ಆಗಿದೆ.
• `baseDuration`: ಸಂಪೂರ್ಣ ಸಬ್‌ಟ್ರೀಯನ್ನು ಮೊದಲಿನಿಂದ ರೆಂಡರ್ ಮಾಡಲು ಎಷ್ಟು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಎಂಬುದರ ಅಂದಾಜು. ಇದು "ಕೆಟ್ಟ-ಸನ್ನಿವೇಶ" ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯ ಒಟ್ಟಾರೆ ಸಂಕೀರ್ಣತೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಉಪಯುಕ್ತವಾಗಿದೆ. `actualDuration` `baseDuration` ಗಿಂತ ಚಿಕ್ಕದಾಗಿದ್ದರೆ, ಮೆಮೋಯೈಸೇಶನ್‌ನಂತಹ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆ ಎಂದು ಸೂಚಿಸುತ್ತದೆ.
• `startTime` ಮತ್ತು `commitTime`: ರಿಯಾಕ್ಟ್ ರೆಂಡರಿಂಗ್ ಪ್ರಾರಂಭಿಸಿದಾಗ ಮತ್ತು ಅದು ಅಪ್‌ಡೇಟ್ ಅನ್ನು DOM ಗೆ ಕಮಿಟ್ ಮಾಡಿದಾಗನ ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್‌ಗಳು. ಇವುಗಳನ್ನು ಕಾಲಾನಂತರದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಬಳಸಬಹುದು.
• `interactions`: ಅಪ್‌ಡೇಟ್ ಅನ್ನು ನಿಗದಿಪಡಿಸಿದಾಗ ಟ್ರೇಸ್ ಮಾಡಲಾಗುತ್ತಿದ್ದ "ಸಂವಹನಗಳ" ಒಂದು ಸೆಟ್ (ಇದು ಅಪ್‌ಡೇಟ್‌ಗಳ ಕಾರಣವನ್ನು ಟ್ರೇಸ್ ಮಾಡಲು ಒಂದು ಪ್ರಾಯೋಗಿಕ API ಯ ಭಾಗವಾಗಿದೆ).

ಪ್ರೊಫೈಲರ್‌ನ ಔಟ್‌ಪುಟ್ ಅನ್ನು ಅರ್ಥೈಸುವುದು: ಒಂದು ಮಾರ್ಗದರ್ಶಿ ಪ್ರವಾಸ

ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್‌ನಲ್ಲಿ ರೆಕಾರ್ಡಿಂಗ್ ಸೆಶನ್ ಅನ್ನು ನಿಲ್ಲಿಸಿದ ನಂತರ, ನಿಮಗೆ ಅಪಾರ ಪ್ರಮಾಣದ ಮಾಹಿತಿ ಸಿಗುತ್ತದೆ. UI ನ ಮುಖ್ಯ ಭಾಗಗಳನ್ನು ವಿಂಗಡಿಸೋಣ.

ಕಮಿಟ್ ಸೆಲೆಕ್ಟರ್

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

ಫ್ಲೇಮ್‌ಗ್ರಾಫ್ ಚಾರ್ಟ್

ಇದು ಅತ್ಯಂತ ಶಕ್ತಿಶಾಲಿ ದೃಶ್ಯೀಕರಣವಾಗಿದೆ. ಆಯ್ಕೆಮಾಡಿದ ಕಮಿಟ್‌ಗಾಗಿ, ಫ್ಲೇಮ್‌ಗ್ರಾಫ್ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಯಾವ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ರೆಂಡರ್ ಆಗಿವೆ ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ. ಅದನ್ನು ಓದುವುದು ಹೇಗೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

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

ರ್ಯಾಂಕ್ಡ್ ಚಾರ್ಟ್

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

ಕಾಂಪೊನೆಂಟ್ ವಿವರಗಳ ಪೇನ್

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

• ರೆಂಡರ್ ಅವಧಿಗಳು: ಇದು ಆಯ್ಕೆಮಾಡಿದ ಕಮಿಟ್‌ನಲ್ಲಿ ಆ ಕಾಂಪೊನೆಂಟ್‌ಗೆ `actualDuration` ಮತ್ತು `baseDuration` ಅನ್ನು ತೋರಿಸುತ್ತದೆ.
• "Rendered at": ಈ ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರ್ ಆದ ಎಲ್ಲಾ ಕಮಿಟ್‌ಗಳನ್ನು ಇದು ಪಟ್ಟಿ ಮಾಡುತ್ತದೆ, ಅದು ಎಷ್ಟು ಬಾರಿ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತದೆ ಎಂಬುದನ್ನು ತ್ವರಿತವಾಗಿ ನೋಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
• "Why did this render?": ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಅತ್ಯಂತ ಮೌಲ್ಯಯುತವಾದ ಮಾಹಿತಿಯಾಗಿದೆ. ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಏಕೆ ಮರು-ರೆಂಡರ್ ಆಯಿತು ಎಂದು ಹೇಳಲು ತನ್ನ ಕೈಲಾದಷ್ಟು ಪ್ರಯತ್ನಿಸುತ್ತದೆ. ಸಾಮಾನ್ಯ ಕಾರಣಗಳು ಹೀಗಿವೆ:
  • ಪ್ರಾಪ್ಸ್ ಬದಲಾಗಿದೆ
  • ಹುಕ್ಸ್ ಬದಲಾಗಿದೆ (ಉದಾಹರಣೆಗೆ, `useState` ಅಥವಾ `useReducer` ಮೌಲ್ಯ ಅಪ್‌ಡೇಟ್ ಆಗಿದೆ)
  • ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರ್ ಆಗಿದೆ (ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳಿಗೆ ಇದು ಸಾಮಾನ್ಯ ಕಾರಣ)
  • ಕಾಂಟೆಕ್ಸ್ಟ್ ಬದಲಾಗಿದೆ

ಸಾಮಾನ್ಯ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳು ಮತ್ತು ಅವುಗಳನ್ನು ಸರಿಪಡಿಸುವುದು ಹೇಗೆ

ಈಗ ನೀವು ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾವನ್ನು ಹೇಗೆ ಸಂಗ್ರಹಿಸುವುದು ಮತ್ತು ಓದುವುದು ಎಂದು ತಿಳಿದಿದ್ದೀರಿ, ಪ್ರೊಫೈಲರ್ ಪತ್ತೆಹಚ್ಚಲು ಸಹಾಯ ಮಾಡುವ ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಮತ್ತು ಅವುಗಳನ್ನು ಪರಿಹರಿಸಲು ಪ್ರಮಾಣಿತ ರಿಯಾಕ್ಟ್ ಪ್ಯಾಟರ್ನ್‌ಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

ಸಮಸ್ಯೆ 1: ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳು

ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಇದು ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಯಾಗಿದೆ. ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನ ಔಟ್‌ಪುಟ್ ಒಂದೇ ರೀತಿ ಇದ್ದರೂ ಅದು ಮರು-ರೆಂಡರ್ ಆದಾಗ ಇದು ಸಂಭವಿಸುತ್ತದೆ. ಇದು CPU ಸೈಕಲ್‌ಗಳನ್ನು ವ್ಯರ್ಥ ಮಾಡುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ UI ಅನ್ನು ನಿಧಾನಗೊಳಿಸಬಹುದು.

ರೋಗನಿರ್ಣಯ:

• ಪ್ರೊಫೈಲರ್‌ನಲ್ಲಿ, ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನೇಕ ಕಮಿಟ್‌ಗಳಲ್ಲಿ ಆಗಾಗ್ಗೆ ರೆಂಡರ್ ಆಗುವುದನ್ನು ನೀವು ನೋಡುತ್ತೀರಿ.
• "Why did this render?" ವಿಭಾಗವು ಅದರ ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್ ಆಗಿದ್ದರಿಂದ, ಅದರ ಸ್ವಂತ ಪ್ರಾಪ್ಸ್ ಬದಲಾಗದಿದ್ದರೂ, ಇದು ರೆಂಡರ್ ಆಗಿದೆ ಎಂದು ಸೂಚಿಸುತ್ತದೆ.
• ಫ್ಲೇಮ್‌ಗ್ರಾಫ್‌ನಲ್ಲಿನ ಅನೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಬಣ್ಣದಲ್ಲಿರುತ್ತವೆ, ಆದರೂ ಅವು ಅವಲಂಬಿಸಿರುವ ಸ್ಟೇಟ್‌ನ ಒಂದು ಸಣ್ಣ ಭಾಗ ಮಾತ್ರ ವಾಸ್ತವವಾಗಿ ಬದಲಾಗಿರುತ್ತದೆ.

ಪರಿಹಾರ 1: `React.memo()`

`React.memo` ಒಂದು ಹೈಯರ್-ಆರ್ಡರ್ ಕಾಂಪೊನೆಂಟ್ (HOC) ಆಗಿದ್ದು ಅದು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮೆಮೋಯೈಜ್ ಮಾಡುತ್ತದೆ. ಇದು ಕಾಂಪೊನೆಂಟ್‌ನ ಹಿಂದಿನ ಮತ್ತು ಹೊಸ ಪ್ರಾಪ್ಸ್‌ಗಳ ಶಾಲ್ಲೋ ಹೋಲಿಕೆಯನ್ನು ಮಾಡುತ್ತದೆ. ಪ್ರಾಪ್ಸ್ ಒಂದೇ ಆಗಿದ್ದರೆ, ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡುವುದನ್ನು ಬಿಟ್ಟು ಕೊನೆಯ ರೆಂಡರ್ ಫಲಿತಾಂಶವನ್ನು ಮರುಬಳಕೆ ಮಾಡುತ್ತದೆ.

`React.memo` ಗಿಂತ ಮೊದಲು:**

function UserAvatar({ userName, avatarUrl }) {
  console.log(`Rendering UserAvatar for ${userName}`)
  return ;
}

// ಪೇರೆಂಟ್‌ನಲ್ಲಿ:
// ಪೇರೆಂಟ್ ಯಾವುದೇ ಕಾರಣಕ್ಕಾಗಿ ಮರು-ರೆಂಡರ್ ಆದರೆ (ಉದಾ., ಅದರ ಸ್ವಂತ ಸ್ಟೇಟ್ ಬದಲಾವಣೆ),
// userName ಮತ್ತು avatarUrl ಒಂದೇ ಆಗಿದ್ದರೂ UserAvatar ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ.

import React from 'react';

const UserAvatar = React.memo(function UserAvatar({ userName, avatarUrl }) {
  console.log(`Rendering UserAvatar for ${userName}`)
  return ;
});

// ಈಗ, userName ಅಥವಾ avatarUrl ಪ್ರಾಪ್ಸ್ ನಿಜವಾಗಿಯೂ ಬದಲಾದರೆ ಮಾತ್ರ UserAvatar ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ.

function ParentComponent() {
  const [count, setCount] = useState(0);

  // ಈ ಫಂಕ್ಷನ್ ParentComponent ನ ಪ್ರತಿ ರೆಂಡರ್‌ನಲ್ಲಿ ಮರುಸೃಷ್ಟಿಯಾಗುತ್ತದೆ
  const handleItemClick = (id) => {
    console.log('Clicked item', id);
  };

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* count ಬದಲಾದಾಗಲೆಲ್ಲಾ MemoizedListItem ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ, ಏಕೆಂದರೆ handleItemClick ಒಂದು ಹೊಸ ಫಂಕ್ಷನ್ ಆಗಿದೆ */}
      
    
  );
}

import { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // ಈ ಫಂಕ್ಷನ್ ಈಗ ಮೆಮೋಯೈಜ್ ಆಗಿದೆ ಮತ್ತು ಅದರ ಡಿಪೆಂಡೆನ್ಸಿಗಳು (ಖಾಲಿ ಅರೇ) ಬದಲಾಗದ ಹೊರತು ಮರುಸೃಷ್ಟಿಯಾಗುವುದಿಲ್ಲ.
  const handleItemClick = useCallback((id) => {
    console.log('Clicked item', id);
  }, []); // ಖಾಲಿ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇ ಎಂದರೆ ಅದು ಒಮ್ಮೆ ಮಾತ್ರ ರಚನೆಯಾಗುತ್ತದೆ

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* ಈಗ, count ಬದಲಾದಾಗ MemoizedListItem ಮರು-ರೆಂಡರ್ ಆಗುವುದಿಲ್ಲ */}
      
    
  );
}

function ProductList({ products, filterTerm }) {
  // ಈ ದುಬಾರಿ ಫಿಲ್ಟರಿಂಗ್ ಕಾರ್ಯಾಚರಣೆಯು ProductList ನ ಪ್ರತಿಯೊಂದು ರೆಂಡರ್‌ನಲ್ಲಿಯೂ ಚಲಿಸುತ್ತದೆ,
  // ಸಂಬಂಧವಿಲ್ಲದ ಪ್ರಾಪ್ ಬದಲಾದರೂ ಸಹ.
  const visibleProducts = products.filter(p => p.name.includes(filterTerm));

  return (
    

      {visibleProducts.map(p => 
{p.name}
)}
    
  );
}

import { useMemo } from 'react';

function ProductList({ products, filterTerm }) {
  // ಈ ಲೆಕ್ಕಾಚಾರ ಈಗ `products` ಅಥವಾ `filterTerm` ಬದಲಾದಾಗ ಮಾತ್ರ ಚಲಿಸುತ್ತದೆ.
  const visibleProducts = useMemo(() => {
    return products.filter(p => p.name.includes(filterTerm));
  }, [products, filterTerm]);

  return (
    

      {visibleProducts.map(p => 
{p.name}
)}
    
  );
}

// AppContext.js
const AppContext = createContext({ 
  currentUser: null, 
  theme: 'light', 
  language: 'en',
  setTheme: () => {}, 
  // ... ಮತ್ತು ಇತರ 20 ಮೌಲ್ಯಗಳು
});

// MyComponent.js
// ಈ ಕಾಂಪೊನೆಂಟ್‌ಗೆ currentUser ಮಾತ್ರ ಬೇಕು, ಆದರೆ ಥೀಮ್ ಬದಲಾದಾಗ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ!
const { currentUser } = useContext(AppContext);

// UserContext.js
const UserContext = createContext(null);

// ThemeContext.js
const ThemeContext = createContext({ theme: 'light', setTheme: () => {} });

// MyComponent.js
// ಈ ಕಾಂಪೊನೆಂಟ್ ಈಗ currentUser ಬದಲಾದಾಗ ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ.
const currentUser = useContext(UserContext);

// webpack.config.js
module.exports = {
  // ... ಇತರ ಕಾನ್ಫಿಗ್
  resolve: {
    alias: {
      'react-dom$': 'react-dom/profiling',
    },
  },
};