ಕನ್ನಡ

ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲರ್ APIಯಲ್ಲಿ ಪರಿಣತಿ ಪಡೆಯಿರಿ. ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು, ಅನಗತ್ಯ ರೀ-ರೆಂಡರ್‌ಗಳನ್ನು ಸರಿಪಡಿಸಲು ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಕಲಿಯಿರಿ.

ಉನ್ನತ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುವುದು: ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲರ್ 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` ಪ್ಯಾಕೇಜ್‌ನಿಂದ ರಫ್ತು ಮಾಡಲಾದ `` ಕಾಂಪೊನೆಂಟ್ ನಿಮಗೆ ಅದನ್ನು ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ.

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

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

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` ಕಾಲ್‌ಬ್ಯಾಕ್ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ರೋಗನಿರ್ಣಯ:

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

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

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

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

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

`React.memo` ನಂತರ:**

import React from 'react';

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

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

ಪರಿಹಾರ 2: `useCallback()`

`React.memo` ಅನ್ನು ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ಅಥವಾ ಫಂಕ್ಷನ್‌ಗಳಂತಹ ನಾನ್-ಪ್ರಿಮಿಟಿವ್ ಮೌಲ್ಯಗಳ ಪ್ರಾಪ್ಸ್‌ಗಳಿಂದ ಸೋಲಿಸಬಹುದು. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, `() => {} !== () => {}`. ಪ್ರತಿ ರೆಂಡರ್‌ನಲ್ಲಿ ಹೊಸ ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ ನೀವು ಮೆಮೋಯೈಜ್ ಮಾಡಿದ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಫಂಕ್ಷನ್ ಅನ್ನು ಪ್ರಾಪ್ ಆಗಿ ಪಾಸ್ ಮಾಡಿದರೆ, ಅದು ಇನ್ನೂ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ.

`useCallback` ಹುಕ್ ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತದೆ, ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ನ ಮೆಮೋಯೈಜ್ ಮಾಡಿದ ಆವೃತ್ತಿಯನ್ನು ಹಿಂತಿರುಗಿಸುವ ಮೂಲಕ. ಇದು ಅದರ ಡಿಪೆಂಡೆನ್ಸಿಗಳಲ್ಲಿ ಒಂದು ಬದಲಾದರೆ ಮಾತ್ರ ಬದಲಾಗುತ್ತದೆ.

`useCallback` ಗಿಂತ ಮೊದಲು:**

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

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

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

`useCallback` ನಂತರ:**

import { useState, useCallback } from 'react';

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

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

  return (
    
{/* ಈಗ, count ಬದಲಾದಾಗ MemoizedListItem ಮರು-ರೆಂಡರ್ ಆಗುವುದಿಲ್ಲ */}
); }

ಪರಿಹಾರ 3: `useMemo()`

`useCallback` ನಂತೆಯೇ, `useMemo` ಮೌಲ್ಯಗಳನ್ನು ಮೆಮೋಯೈಜ್ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ. ಇದು ದುಬಾರಿ ಲೆಕ್ಕಾಚಾರಗಳಿಗೆ ಅಥವಾ ಪ್ರತಿ ರೆಂಡರ್‌ನಲ್ಲಿ ನೀವು ಪುನರುತ್ಪಾದಿಸಲು ಬಯಸದ ಸಂಕೀರ್ಣ ಆಬ್ಜೆಕ್ಟ್‌ಗಳು/ಅರೇಗಳನ್ನು ರಚಿಸಲು ಪರಿಪೂರ್ಣವಾಗಿದೆ.

`useMemo` ಗಿಂತ ಮೊದಲು:**

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

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

`useMemo` ನಂತರ:**

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}
  • )}
); }

ಸಮಸ್ಯೆ 2: ದೊಡ್ಡ ಮತ್ತು ದುಬಾರಿ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಗಳು

ಕೆಲವೊಮ್ಮೆ ಸಮಸ್ಯೆಯು ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳಲ್ಲ, ಆದರೆ ಒಂದು ರೆಂಡರ್ ನಿಜವಾಗಿಯೂ ನಿಧಾನವಾಗಿರುತ್ತದೆ ಏಕೆಂದರೆ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀ ದೊಡ್ಡದಾಗಿರುತ್ತದೆ ಅಥವಾ ಭಾರೀ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಮಾಡುತ್ತದೆ.

ರೋಗನಿರ್ಣಯ:

  • ಫ್ಲೇಮ್‌ಗ್ರಾಫ್‌ನಲ್ಲಿ, ನೀವು ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಅತ್ಯಂತ ಅಗಲವಾದ, ಹಳದಿ ಅಥವಾ ಕೆಂಪು ಬಾರ್‌ನೊಂದಿಗೆ ನೋಡುತ್ತೀರಿ, ಇದು ಹೆಚ್ಚಿನ `baseDuration` ಮತ್ತು `actualDuration` ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ.
  • ಈ ಕಾಂಪೊನೆಂಟ್ ಕಾಣಿಸಿಕೊಂಡಾಗ ಅಥವಾ ಅಪ್‌ಡೇಟ್ ಆದಾಗ UI ಫ್ರೀಜ್ ಆಗುತ್ತದೆ ಅಥವಾ ಅಸ್ಥಿರವಾಗುತ್ತದೆ.

ಪರಿಹಾರ: ವಿಂಡೋಯಿಂಗ್ / ವರ್ಚುವಲೈಸೇಶನ್

ದೀರ್ಘ ಪಟ್ಟಿಗಳು ಅಥವಾ ದೊಡ್ಡ ಡೇಟಾ ಗ್ರಿಡ್‌ಗಳಿಗಾಗಿ, ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿ ಪರಿಹಾರವೆಂದರೆ ವ್ಯೂಪೋರ್ಟ್‌ನಲ್ಲಿ ಬಳಕೆದಾರರಿಗೆ ಪ್ರಸ್ತುತ ಗೋಚರಿಸುವ ಐಟಂಗಳನ್ನು ಮಾತ್ರ ರೆಂಡರ್ ಮಾಡುವುದು. ಈ ತಂತ್ರವನ್ನು "ವಿಂಡೋಯಿಂಗ್" ಅಥವಾ "ವರ್ಚುವಲೈಸೇಶನ್" ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ. 10,000 ಪಟ್ಟಿ ಐಟಂಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುವ ಬದಲು, ನೀವು ಪರದೆಯ ಮೇಲೆ ಹೊಂದಿಕೊಳ್ಳುವ 20 ಅನ್ನು ಮಾತ್ರ ರೆಂಡರ್ ಮಾಡುತ್ತೀರಿ. ಇದು DOM ನೋಡ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಮತ್ತು ರೆಂಡರಿಂಗ್‌ಗೆ ವ್ಯಯಿಸುವ ಸಮಯವನ್ನು ತೀವ್ರವಾಗಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.

ಇದನ್ನು ಮೊದಲಿನಿಂದ ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಸಂಕೀರ್ಣವಾಗಬಹುದು, ಆದರೆ ಅದನ್ನು ಸುಲಭಗೊಳಿಸುವ ಅತ್ಯುತ್ತಮ ಲೈಬ್ರರಿಗಳಿವೆ:

  • `react-window` ಮತ್ತು `react-virtualized` ವರ್ಚುವಲೈಸ್ಡ್ ಪಟ್ಟಿಗಳು ಮತ್ತು ಗ್ರಿಡ್‌ಗಳನ್ನು ರಚಿಸಲು ಜನಪ್ರಿಯ, ಶಕ್ತಿಯುತ ಲೈಬ್ರರಿಗಳಾಗಿವೆ.
  • ಇತ್ತೀಚೆಗೆ, `TanStack Virtual` ನಂತಹ ಲೈಬ್ರರಿಗಳು ಹೆಡ್‌ಲೆಸ್, ಹುಕ್-ಆಧಾರಿತ ವಿಧಾನಗಳನ್ನು ನೀಡುತ್ತವೆ, ಅವು ಅತ್ಯಂತ ನಮ್ಯವಾಗಿವೆ.

ಸಮಸ್ಯೆ 3: ಕಾಂಟೆಕ್ಸ್ಟ್ API ಯ ಅಪಾಯಗಳು

ರಿಯಾಕ್ಟ್ ಕಾಂಟೆಕ್ಸ್ಟ್ API ಪ್ರಾಪ್ ಡ್ರಿಲ್ಲಿಂಗ್ ಅನ್ನು ತಪ್ಪಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದೆ, ಆದರೆ ಇದರಲ್ಲಿ ಒಂದು ಗಮನಾರ್ಹ ಕಾರ್ಯಕ್ಷಮತೆಯ ಎಚ್ಚರಿಕೆ ಇದೆ: ಕಾಂಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಬಳಸುವ ಯಾವುದೇ ಕಾಂಪೊನೆಂಟ್ ಆ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನಲ್ಲಿನ ಯಾವುದೇ ಮೌಲ್ಯ ಬದಲಾದಾಗಲೆಲ್ಲಾ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ, ಆ ಕಾಂಪೊನೆಂಟ್ ಆ ನಿರ್ದಿಷ್ಟ ಡೇಟಾ ತುಣುಕನ್ನು ಬಳಸದಿದ್ದರೂ ಸಹ.

ರೋಗನಿರ್ಣಯ:

  • ನೀವು ನಿಮ್ಮ ಗ್ಲೋಬಲ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನಲ್ಲಿ ಒಂದೇ ಮೌಲ್ಯವನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತೀರಿ (ಉದಾ., ಥೀಮ್ ಟಾಗಲ್).
  • ಪ್ರೊಫೈಲರ್ ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ನಾದ್ಯಂತ ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು ತೋರಿಸುತ್ತದೆ, ಥೀಮ್‌ಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಸಂಬಂಧವಿಲ್ಲದ ಕಾಂಪೊನೆಂಟ್‌ಗಳೂ ಸಹ.
  • "Why did this render?" ಪೇನ್ ಈ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ "Context changed" ಎಂದು ತೋರಿಸುತ್ತದೆ.

ಪರಿಹಾರ: ನಿಮ್ಮ ಕಾಂಟೆಕ್ಸ್ಟ್‌ಗಳನ್ನು ವಿಭಜಿಸಿ

ಇದನ್ನು ಪರಿಹರಿಸಲು ಉತ್ತಮ ಮಾರ್ಗವೆಂದರೆ ಒಂದು ದೊಡ್ಡ, ಏಕಶಿಲೆಯ `AppContext` ಅನ್ನು ರಚಿಸುವುದನ್ನು ತಪ್ಪಿಸುವುದು. ಬದಲಾಗಿ, ನಿಮ್ಮ ಗ್ಲೋಬಲ್ ಸ್ಟೇಟ್ ಅನ್ನು ಅನೇಕ, ಚಿಕ್ಕ, ಹೆಚ್ಚು ಗ್ರ್ಯಾನ್ಯುಲರ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ಗಳಾಗಿ ವಿಭಜಿಸಿ.

ಮೊದಲು (ಕೆಟ್ಟ ಅಭ್ಯಾಸ):**

// 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);

ಸುಧಾರಿತ ಪ್ರೊಫೈಲಿಂಗ್ ತಂತ್ರಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಪ್ರೊಡಕ್ಷನ್ ಪ್ರೊಫೈಲಿಂಗ್‌ಗಾಗಿ ಬಿಲ್ಡಿಂಗ್

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, `` ಕಾಂಪೊನೆಂಟ್ ಪ್ರೊಡಕ್ಷನ್ ಬಿಲ್ಡ್‌ನಲ್ಲಿ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ. ಅದನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು, ನೀವು ವಿಶೇಷ `react-dom/profiling` ಬಿಲ್ಡ್ ಬಳಸಿ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಬಿಲ್ಡ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಇದು ಪ್ರೊಡಕ್ಷನ್‌ಗೆ ಸಿದ್ಧವಾದ ಬಂಡಲ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ, ಅದು ಇನ್ನೂ ಪ್ರೊಫೈಲಿಂಗ್ ಇನ್‌ಸ್ಟ್ರುಮೆಂಟೇಶನ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.

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

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

ಇದು ನಿಮ್ಮ ನಿಯೋಜಿತ, ಪ್ರೊಡಕ್ಷನ್-ಆಪ್ಟಿಮೈಸ್ಡ್ ಸೈಟ್‌ನಲ್ಲಿ ನೈಜ-ಪ್ರಪಂಚದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಲು ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಪ್ರೊಫೈಲರ್ ಅನ್ನು ಬಳಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಒಂದು ಪೂರ್ವಭಾವಿ ವಿಧಾನ

ಬಳಕೆದಾರರು ನಿಧಾನಗತಿಯ ಬಗ್ಗೆ ದೂರು ನೀಡುವವರೆಗೆ ಕಾಯಬೇಡಿ. ನಿಮ್ಮ ಡೆವಲಪ್‌ಮೆಂಟ್ ವರ್ಕ್‌ಫ್ಲೋನಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮಾಪನವನ್ನು ಸಂಯೋಜಿಸಿ:

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

ತೀರ್ಮಾನ

ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್ ಒಂದು ನಂತರದ ಆಲೋಚನೆಯಲ್ಲ; ಇದು ಉತ್ತಮ-ಗುಣಮಟ್ಟದ, ವೃತ್ತಿಪರ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಒಂದು ಪ್ರಮುಖ ಅಂಶವಾಗಿದೆ. ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲರ್ API, ಅದರ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಮತ್ತು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ರೂಪಗಳಲ್ಲಿ, ರೆಂಡರಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸ್ಪಷ್ಟಪಡಿಸುತ್ತದೆ ಮತ್ತು ತಿಳುವಳಿಕೆಯುಳ್ಳ ನಿರ್ಧಾರಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಅಗತ್ಯವಾದ નક્ಕರ ಡೇಟಾವನ್ನು ಒದಗಿಸುತ್ತದೆ.

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