ರಿಯಾಕ್ಟ್ ರೆಂಡರ್: ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರಿಂಗ್ ಮತ್ತು ಲೈಫ್‌ಸೈಕಲ್ ನಿರ್ವಹಣೆ

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

ರಿಯಾಕ್ಟ್ ರೆಂಡರಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ರಿಯಾಕ್ಟ್‌ನ ಕಾರ್ಯಾಚರಣೆಯ ಮೂಲವು ಅದರ ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ಆರ್ಕಿಟೆಕ್ಚರ್ ಮತ್ತು ವರ್ಚುವಲ್ DOMನಲ್ಲಿದೆ. ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೇಟ್ ಅಥವಾ ಪ್ರಾಪ್ಸ್ ಬದಲಾದಾಗ, ರಿಯಾಕ್ಟ್ ನೇರವಾಗಿ ನಿಜವಾದ DOM ಅನ್ನು ಬದಲಾಯಿಸುವುದಿಲ್ಲ. ಬದಲಾಗಿ, ಅದು DOMನ ವರ್ಚುವಲ್ ಪ್ರಾತಿನಿಧ್ಯವನ್ನು ರಚಿಸುತ್ತದೆ, ಇದನ್ನು ವರ್ಚುವಲ್ DOM ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ. ನಂತರ, ರಿಯಾಕ್ಟ್ ಈ ವರ್ಚುವಲ್ DOM ಅನ್ನು ಹಿಂದಿನ ಆವೃತ್ತಿಯೊಂದಿಗೆ ಹೋಲಿಸುತ್ತದೆ ಮತ್ತು ನಿಜವಾದ DOM ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಬೇಕಾದ ಕನಿಷ್ಠ ಬದಲಾವಣೆಗಳನ್ನು ಗುರುತಿಸುತ್ತದೆ. ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು “ರೀಕನ್ಸಿಲಿಯೇಶನ್” (reconciliation) ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ, ಮತ್ತು ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ.

ವರ್ಚುವಲ್ DOM ಮತ್ತು ರೀಕನ್ಸಿಲಿಯೇಶನ್

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

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

ಸನ್ನಿವೇಶ: ಒಂದು ಬಟನ್ ಕ್ಲಿಕ್ ಪರದೆಯ ಮೇಲೆ ಪ್ರದರ್ಶಿಸಲಾದ ಕೌಂಟರ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ.

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

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

ರಿಯಾಕ್ಟ್ ಬದಲಾವಣೆಗಳನ್ನು ಹೇಗೆ ನಿರ್ಧರಿಸುತ್ತದೆ: ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್

ರಿಯಾಕ್ಟ್‌ನ ಡಿಫಿಂಗ್ ಅಲ್ಗಾರಿದಮ್ (diffing algorithm) ರೀಕನ್ಸಿಲಿಯೇಶನ್ ಪ್ರಕ್ರಿಯೆಯ ಹೃದಯವಾಗಿದೆ. ಇದು ವ್ಯತ್ಯಾಸಗಳನ್ನು ಗುರುತಿಸಲು ಹೊಸ ಮತ್ತು ಹಳೆಯ ವರ್ಚುವಲ್ DOM ಟ್ರೀಗಳನ್ನು ಹೋಲಿಸುತ್ತದೆ. ಹೋಲಿಕೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಅಲ್ಗಾರಿದಮ್ ಹಲವಾರು ಊಹೆಗಳನ್ನು ಮಾಡುತ್ತದೆ:

• ವಿವಿಧ ಪ್ರಕಾರಗಳ ಎರಡು ಎಲಿಮೆಂಟ್‌ಗಳು ವಿಭಿನ್ನ ಟ್ರೀಗಳನ್ನು ಉತ್ಪಾದಿಸುತ್ತವೆ. ಮೂಲ ಎಲಿಮೆಂಟ್‌ಗಳು ವಿಭಿನ್ನ ಪ್ರಕಾರಗಳನ್ನು ಹೊಂದಿದ್ದರೆ (ಉದಾಹರಣೆಗೆ, <div> ಅನ್ನು <span> ಗೆ ಬದಲಾಯಿಸುವುದು), ರಿಯಾಕ್ಟ್ ಹಳೆಯ ಟ್ರೀ ಅನ್ನು ಅನ್‌ಮೌಂಟ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಹೊಸ ಟ್ರೀ ಅನ್ನು ಮೊದಲಿನಿಂದ ನಿರ್ಮಿಸುತ್ತದೆ.
• ಒಂದೇ ಪ್ರಕಾರದ ಎರಡು ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹೋಲಿಸುವಾಗ, ಬದಲಾವಣೆಗಳಿವೆಯೇ ಎಂದು ನಿರ್ಧರಿಸಲು ರಿಯಾಕ್ಟ್ ಅವುಗಳ ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು ನೋಡುತ್ತದೆ. ಕೇವಲ ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳು ಬದಲಾಗಿದ್ದರೆ, ರಿಯಾಕ್ಟ್ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ DOM ನೋಡ್‌ನ ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ.
• ಪಟ್ಟಿಯ ಐಟಂಗಳನ್ನು ಅನನ್ಯವಾಗಿ ಗುರುತಿಸಲು ರಿಯಾಕ್ಟ್ 'ಕೀ' ಪ್ರಾಪ್ (key prop) ಅನ್ನು ಬಳಸುತ್ತದೆ. 'ಕೀ' ಪ್ರಾಪ್ ಒದಗಿಸುವುದರಿಂದ ಇಡೀ ಪಟ್ಟಿಯನ್ನು ಮರು-ರೆಂಡರಿಂಗ್ ಮಾಡದೆ, ಪಟ್ಟಿಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ರಿಯಾಕ್ಟ್‌ಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಈ ಊಹೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ದಕ್ಷವಾದ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬರೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಪಟ್ಟಿಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುವಾಗ 'ಕೀ'ಗಳನ್ನು ಬಳಸುವುದು ಕಾರ್ಯಕ್ಷಮತೆಗೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ.

ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಲೈಫ್‌ಸೈಕಲ್

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

ಕ್ಲಾಸ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿನ ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳು

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

• constructor(props): ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟ್ ಆಗುವ ಮೊದಲು ಕರೆಯಲಾಗುತ್ತದೆ. ಇದನ್ನು ಸ್ಟೇಟ್ ಅನ್ನು ಇನಿಶಿಯಲೈಸ್ ಮಾಡಲು ಮತ್ತು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಬೈಂಡ್ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ.
• static getDerivedStateFromProps(props, state): ಆರಂಭಿಕ ಮೌಂಟ್ ಮತ್ತು ನಂತರದ ಅಪ್‌ಡೇಟ್‌ಗಳೆರಡರಲ್ಲೂ, ರೆಂಡರಿಂಗ್‌ಗೆ ಮೊದಲು ಕರೆಯಲಾಗುತ್ತದೆ. ಇದು ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಒಂದು ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು, ಅಥವಾ ಹೊಸ ಪ್ರಾಪ್ಸ್‌ಗೆ ಯಾವುದೇ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳ ಅಗತ್ಯವಿಲ್ಲ ಎಂದು ಸೂಚಿಸಲು null ಅನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು. ಈ ಮೆಥಡ್ ಪ್ರಾಪ್ ಬದಲಾವಣೆಗಳ ಆಧಾರದ ಮೇಲೆ ಊಹಿಸಬಹುದಾದ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಉತ್ತೇಜಿಸುತ್ತದೆ.
• render(): ರೆಂಡರ್ ಮಾಡಲು JSX ಅನ್ನು ಹಿಂತಿರುಗಿಸುವ ಅಗತ್ಯವಿರುವ ಮೆಥಡ್. ಇದು ಪ್ರಾಪ್ಸ್ ಮತ್ತು ಸ್ಟೇಟ್‌ನ ಒಂದು ಶುದ್ಧ ಫಂಕ್ಷನ್ (pure function) ಆಗಿರಬೇಕು.
• componentDidMount(): ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟ್ ಆದ ತಕ್ಷಣ (ಟ್ರೀಗೆ ಸೇರಿಸಿದಾಗ) ಕರೆಯಲಾಗುತ್ತದೆ. ಡೇಟಾ ತರುವುದು ಅಥವಾ ಸಬ್‌ಸ್ಕ್ರಿಪ್ಶನ್‌ಗಳನ್ನು ಸ್ಥಾಪಿಸುವಂತಹ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಇದು ಉತ್ತಮ ಸ್ಥಳವಾಗಿದೆ.
• shouldComponentUpdate(nextProps, nextState): ಹೊಸ ಪ್ರಾಪ್ಸ್ ಅಥವಾ ಸ್ಟೇಟ್ ಸ್ವೀಕರಿಸಿದಾಗ ರೆಂಡರಿಂಗ್‌ಗೆ ಮೊದಲು ಕರೆಯಲಾಗುತ್ತದೆ. ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯುವ ಮೂಲಕ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಇದು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್ ಅಪ್‌ಡೇಟ್ ಆಗಬೇಕಾದರೆ true ಅಥವಾ ಆಗಬಾರದೆಂದರೆ false ಅನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು.
• getSnapshotBeforeUpdate(prevProps, prevState): DOM ಅಪ್‌ಡೇಟ್ ಆಗುವ ಸ್ವಲ್ಪ ಮೊದಲು ಕರೆಯಲಾಗುತ್ತದೆ. DOMನಿಂದ ಮಾಹಿತಿಯನ್ನು (ಉದಾಹರಣೆಗೆ, ಸ್ಕ್ರಾಲ್ ಸ್ಥಾನ) ಬದಲಾಗುವ ಮೊದಲು ಸೆರೆಹಿಡಿಯಲು ಉಪಯುಕ್ತವಾಗಿದೆ. ಹಿಂತಿರುಗಿಸಿದ ಮೌಲ್ಯವನ್ನು componentDidUpdate() ಗೆ ಪ್ಯಾರಾಮೀಟರ್ ಆಗಿ ರವಾನಿಸಲಾಗುತ್ತದೆ.
• componentDidUpdate(prevProps, prevState, snapshot): ಅಪ್‌ಡೇಟ್ ಸಂಭವಿಸಿದ ತಕ್ಷಣ ಕರೆಯಲಾಗುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್ ಅಪ್‌ಡೇಟ್ ಆದ ನಂತರ DOM ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಇದು ಉತ್ತಮ ಸ್ಥಳವಾಗಿದೆ.
• componentWillUnmount(): ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆಗುವ ಮತ್ತು ನಾಶವಾಗುವ ಸ್ವಲ್ಪ ಮೊದಲು ಕರೆಯಲಾಗುತ್ತದೆ. ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದು ಅಥವಾ ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಗಳನ್ನು ರದ್ದುಗೊಳಿಸುವಂತಹ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಲು ಇದು ಉತ್ತಮ ಸ್ಥಳವಾಗಿದೆ.
• static getDerivedStateFromError(error): ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ ದೋಷ ಸಂಭವಿಸಿದ ನಂತರ ಕರೆಯಲಾಗುತ್ತದೆ. ಇದು ದೋಷವನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಒಂದು ಮೌಲ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು. ಇದು ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
• componentDidCatch(error, info): ಡಿಸೆಂಡೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ, ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ ದೋಷ ಸಂಭವಿಸಿದ ನಂತರ ಕರೆಯಲಾಗುತ್ತದೆ. ಇದು ದೋಷ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ಸ್ಟಾಕ್ ಮಾಹಿತಿಯನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳಾಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ. ದೋಷಗಳನ್ನು ಎರರ್ ರಿಪೋರ್ಟಿಂಗ್ ಸೇವೆಗೆ ಲಾಗ್ ಮಾಡಲು ಇದು ಉತ್ತಮ ಸ್ಥಳವಾಗಿದೆ.

ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳ ಕ್ರಿಯೆಯ ಉದಾಹರಣೆ

ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟ್ ಆದಾಗ API ನಿಂದ ಡೇಟಾವನ್ನು ತರುವ ಮತ್ತು ಅದರ ಪ್ರಾಪ್ಸ್ ಬದಲಾದಾಗ ಡೇಟಾವನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುವ ಉದಾಹರಣೆಯನ್ನು ಪರಿಗಣಿಸಿ:

class DataFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (this.props.url !== prevProps.url) {
      this.fetchData();
    }
  }

  fetchData = async () => {
    try {
      const response = await fetch(this.props.url);
      const data = await response.json();
      this.setState({ data });
    } catch (error) {
      console.error('ಡೇಟಾ ತರುವಲ್ಲಿ ದೋಷ:', error);
    }
  };

  render() {
    if (!this.state.data) {
      return <p>ಲೋಡ್ ಆಗುತ್ತಿದೆ...</p>;
    }

    return <div>{this.state.data.message}</div>;
  }
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

• componentDidMount() ಕಾಂಪೊನೆಂಟ್ ಮೊದಲ ಬಾರಿಗೆ ಮೌಂಟ್ ಆದಾಗ ಡೇಟಾವನ್ನು ತರುತ್ತದೆ.
• url ಪ್ರಾಪ್ ಬದಲಾದರೆ componentDidUpdate() ಮತ್ತೆ ಡೇಟಾವನ್ನು ತರುತ್ತದೆ.
• ಡೇಟಾ ತರುವಾಗ render() ಮೆಥಡ್ ಲೋಡಿಂಗ್ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ ಮತ್ತು ಡೇಟಾ ಲಭ್ಯವಾದಾಗ ಅದನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳು ಮತ್ತು ಎರರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್

ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ ಸಂಭವಿಸುವ ದೋಷಗಳನ್ನು ನಿಭಾಯಿಸಲು ರಿಯಾಕ್ಟ್ ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳನ್ನು ಸಹ ಒದಗಿಸುತ್ತದೆ:

• static getDerivedStateFromError(error): ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ ದೋಷ ಸಂಭವಿಸಿದ ನಂತರ ಕರೆಯಲಾಗುತ್ತದೆ. ಇದು ದೋಷವನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಒಂದು ಮೌಲ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು. ಇದು ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
• componentDidCatch(error, info): ಡಿಸೆಂಡೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ ದೋಷ ಸಂಭವಿಸಿದ ನಂತರ ಕರೆಯಲಾಗುತ್ತದೆ. ಇದು ದೋಷ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ಸ್ಟಾಕ್ ಮಾಹಿತಿಯನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳಾಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ. ದೋಷಗಳನ್ನು ಎರರ್ ರಿಪೋರ್ಟಿಂಗ್ ಸೇವೆಗೆ ಲಾಗ್ ಮಾಡಲು ಇದು ಉತ್ತಮ ಸ್ಥಳವಾಗಿದೆ.

ಈ ಮೆಥಡ್‌ಗಳು ನಿಮಗೆ ದೋಷಗಳನ್ನು ಸರಾಗವಾಗಿ ನಿಭಾಯಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಕ್ರ್ಯಾಶ್ ಆಗುವುದನ್ನು ತಡೆಯಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ಬಳಕೆದಾರರಿಗೆ ದೋಷ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಲು getDerivedStateFromError() ಮತ್ತು ಸರ್ವರ್‌ಗೆ ದೋಷವನ್ನು ಲಾಗ್ ಮಾಡಲು componentDidCatch() ಅನ್ನು ನೀವು ಬಳಸಬಹುದು.

ಹುಕ್ಸ್ ಮತ್ತು ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು

ರಿಯಾಕ್ಟ್ 16.8 ರಲ್ಲಿ ಪರಿಚಯಿಸಲಾದ ರಿಯಾಕ್ಟ್ ಹುಕ್ಸ್ (Hooks), ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಸ್ಟೇಟ್ ಮತ್ತು ಇತರ ರಿಯಾಕ್ಟ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಕ್ಲಾಸ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಂತೆ ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೂ, ಹುಕ್ಸ್ ಸಮಾನವಾದ ಕಾರ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ.

• useState(): ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಸ್ಟೇಟ್ ಸೇರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• useEffect(): componentDidMount(), componentDidUpdate(), ಮತ್ತು componentWillUnmount() ನಂತೆಯೇ ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• useContext(): ರಿಯಾಕ್ಟ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ಗೆ ಪ್ರವೇಶಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• useReducer(): ರಿಡ್ಯೂಸರ್ ಫಂಕ್ಷನ್ ಬಳಸಿ ಸಂಕೀರ್ಣ ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• useCallback(): ಡಿಪೆಂಡೆನ್ಸಿಗಳಲ್ಲಿ ಒಂದು ಬದಲಾದರೆ ಮಾತ್ರ ಬದಲಾಗುವ ಫಂಕ್ಷನ್‌ನ ಮೆಮೊರೈಸ್ಡ್ ಆವೃತ್ತಿಯನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
• useMemo(): ಡಿಪೆಂಡೆನ್ಸಿಗಳಲ್ಲಿ ಒಂದು ಬದಲಾದಾಗ ಮಾತ್ರ ಮರು-ಗಣನೆ ಮಾಡುವ ಮೆಮೊರೈಸ್ಡ್ ಮೌಲ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
• useRef(): ರೆಂಡರ್‌ಗಳ ನಡುವೆ ಮೌಲ್ಯಗಳನ್ನು ಉಳಿಸಿಕೊಳ್ಳಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• useImperativeHandle(): ref ಬಳಸುವಾಗ ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಬಹಿರಂಗಪಡಿಸಲಾದ ಇನ್‌ಸ್ಟೆನ್ಸ್ ಮೌಲ್ಯವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುತ್ತದೆ.
• useLayoutEffect(): ಎಲ್ಲಾ DOM ಮ್ಯುಟೇಶನ್‌ಗಳ ನಂತರ ಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಫೈರ್ ಆಗುವ useEffect ನ ಒಂದು ಆವೃತ್ತಿ.
• useDebugValue(): ರಿಯಾಕ್ಟ್ ಡೆವ್‌ಟೂಲ್ಸ್‌ನಲ್ಲಿ ಕಸ್ಟಮ್ ಹುಕ್ಸ್‌ಗಾಗಿ ಮೌಲ್ಯವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.

useEffect ಹುಕ್‌ನ ಉದಾಹರಣೆ

ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಡೇಟಾವನ್ನು ತರಲು ನೀವು useEffect() ಹುಕ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:

import React, { useState, useEffect } from 'react';

function DataFetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('ಡೇಟಾ ತರುವಲ್ಲಿ ದೋಷ:', error);
      }
    }

    fetchData();
  }, [url]); // URL ಬದಲಾದರೆ ಮಾತ್ರ ಎಫೆಕ್ಟ್ ಅನ್ನು ಮರು-ರನ್ ಮಾಡಿ

  if (!data) {
    return <p>ಲೋಡ್ ಆಗುತ್ತಿದೆ...</p>;
  }

  return <div>{data.message}</div>;
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

• useEffect() ಕಾಂಪೊನೆಂಟ್ ಮೊದಲ ಬಾರಿಗೆ ರೆಂಡರ್ ಆದಾಗ ಮತ್ತು url ಪ್ರಾಪ್ ಬದಲಾದಾಗಲೆಲ್ಲಾ ಡೇಟಾವನ್ನು ತರುತ್ತದೆ.
• useEffect() ಗೆ ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಡಿಪೆಂಡೆನ್ಸಿಗಳ ಒಂದು ಅರೇ ಆಗಿದೆ. ಯಾವುದೇ ಡಿಪೆಂಡೆನ್ಸಿಗಳು ಬದಲಾದರೆ, ಎಫೆಕ್ಟ್ ಮರು-ರನ್ ಆಗುತ್ತದೆ.
• useState() ಹುಕ್ ಅನ್ನು ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು

ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ದಕ್ಷ ರೆಂಡರಿಂಗ್ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಕೆಲವು ತಂತ್ರಗಳು ಇಲ್ಲಿವೆ:

1. ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯುವುದು

ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವ ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿ ಮಾರ್ಗವೆಂದರೆ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯುವುದು. ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯಲು ಕೆಲವು ತಂತ್ರಗಳು ಇಲ್ಲಿವೆ:

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

2. ಕೋಡ್-ಸ್ಪ್ಲಿಟಿಂಗ್

ಕೋಡ್-ಸ್ಪ್ಲಿಟಿಂಗ್ ಎನ್ನುವುದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸಣ್ಣ ಭಾಗಗಳಾಗಿ ವಿಭಜಿಸುವ ಪ್ರಕ್ರಿಯೆಯಾಗಿದ್ದು, ಇವುಗಳನ್ನು ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಲೋಡ್ ಮಾಡಬಹುದು. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಕೋಡ್-ಸ್ಪ್ಲಿಟಿಂಗ್ ಅನ್ನು ಇಂಪ್ಲಿಮೆಂಟ್ ಮಾಡಲು ಹಲವಾರು ಮಾರ್ಗಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ:

• React.lazy() ಮತ್ತು Suspense ಬಳಸುವುದು: ಈ ವೈಶಿಷ್ಟ್ಯಗಳು ನಿಮಗೆ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಇಂಪೋರ್ಟ್ ಮಾಡಲು, ಅವುಗಳು ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಲೋಡ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ.
• ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್‌ಗಳನ್ನು ಬಳಸುವುದು: ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ನೀವು ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.

3. ಲಿಸ್ಟ್ ವರ್ಚುವಲೈಸೇಶನ್

ದೊಡ್ಡ ಪಟ್ಟಿಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುವಾಗ, ಎಲ್ಲಾ ಐಟಂಗಳನ್ನು ಒಂದೇ ಬಾರಿಗೆ ರೆಂಡರ್ ಮಾಡುವುದು ನಿಧಾನವಾಗಬಹುದು. ಲಿಸ್ಟ್ ವರ್ಚುವಲೈಸೇಶನ್ ತಂತ್ರಗಳು ಪ್ರಸ್ತುತ ಪರದೆಯ ಮೇಲೆ ಗೋಚರಿಸುವ ಐಟಂಗಳನ್ನು ಮಾತ್ರ ರೆಂಡರ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ಸ್ಕ್ರಾಲ್ ಮಾಡಿದಂತೆ, ಹೊಸ ಐಟಂಗಳು ರೆಂಡರ್ ಆಗುತ್ತವೆ ಮತ್ತು ಹಳೆಯ ಐಟಂಗಳು ಅನ್‌ಮೌಂಟ್ ಆಗುತ್ತವೆ.

ಲಿಸ್ಟ್ ವರ್ಚುವಲೈಸೇಶನ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಒದಗಿಸುವ ಹಲವಾರು ಲೈಬ್ರರಿಗಳಿವೆ, ಉದಾಹರಣೆಗೆ:

• react-window
• react-virtualized

4. ಚಿತ್ರಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು

ಚಿತ್ರಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳಿಗೆ ಒಂದು ಪ್ರಮುಖ ಮೂಲವಾಗಿರಬಹುದು. ಚಿತ್ರಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಕೆಲವು ಸಲಹೆಗಳು ಇಲ್ಲಿವೆ:

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

5. ಪ್ರೊಫೈಲಿಂಗ್ ಮತ್ತು ಡೀಬಗ್ಗಿಂಗ್

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

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

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಉದಾಹರಣೆ: ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮೆಮೊರೈಸ್ ಮಾಡುವುದು

ಬಳಕೆದಾರರ ಹೆಸರನ್ನು ಪ್ರದರ್ಶಿಸುವ ಒಂದು ಸರಳ ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ:

function UserProfile({ user }) {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
}

ಈ ಕಾಂಪೊನೆಂಟ್ ಅನಗತ್ಯವಾಗಿ ಮರು-ರೆಂಡರಿಂಗ್ ಆಗುವುದನ್ನು ತಡೆಯಲು, ನೀವು React.memo() ಅನ್ನು ಬಳಸಬಹುದು:

import React from 'react';

const UserProfile = React.memo(({ user }) => {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
});

ಈಗ, user ಪ್ರಾಪ್ ಬದಲಾದರೆ ಮಾತ್ರ UserProfile ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ.

ಉದಾಹರಣೆ: useCallback() ಬಳಸುವುದು

ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್ ಅನ್ನು ರವಾನಿಸುವ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ:

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, handleClick ಫಂಕ್ಷನ್ ParentComponent ನ ಪ್ರತಿ ರೆಂಡರ್‌ನಲ್ಲಿ ಮರು-ರಚನೆಯಾಗುತ್ತದೆ. ಇದು ChildComponent ನ ಪ್ರಾಪ್ಸ್ ಬದಲಾಗದಿದ್ದರೂ ಸಹ, ಅನಗತ್ಯವಾಗಿ ಮರು-ರೆಂಡರ್ ಆಗಲು ಕಾರಣವಾಗುತ್ತದೆ.

ಇದನ್ನು ತಡೆಯಲು, handleClick ಫಂಕ್ಷನ್ ಅನ್ನು ಮೆಮೊರೈಸ್ ಮಾಡಲು ನೀವು useCallback() ಅನ್ನು ಬಳಸಬಹುದು:

import React, { useState, useCallback } from 'react';

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // ಕೌಂಟ್ ಬದಲಾದರೆ ಮಾತ್ರ ಫಂಕ್ಷನ್ ಅನ್ನು ಮರು-ರಚಿಸಿ

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
}

ಈಗ, count ಸ್ಟೇಟ್ ಬದಲಾದರೆ ಮಾತ್ರ handleClick ಫಂಕ್ಷನ್ ಮರು-ರಚನೆಯಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ: useMemo() ಬಳಸುವುದು

ಅದರ ಪ್ರಾಪ್ಸ್ ಆಧಾರದ ಮೇಲೆ ಡಿರೈವ್ಡ್ ಮೌಲ್ಯವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ:

import React, { useState } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = items.filter(item => item.name.includes(filter));

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, items ಪ್ರಾಪ್ ಬದಲಾಗದಿದ್ದರೂ ಸಹ, MyComponent ನ ಪ್ರತಿ ರೆಂಡರ್‌ನಲ್ಲಿ filteredItems ಅರೇ ಮರು-ಲೆಕ್ಕಾಚಾರಗೊಳ್ಳುತ್ತದೆ. items ಅರೇ ದೊಡ್ಡದಾಗಿದ್ದರೆ ಇದು ಅದಕ್ಷವಾಗಬಹುದು.

ಇದನ್ನು ತಡೆಯಲು, filteredItems ಅರೇಯನ್ನು ಮೆಮೊರೈಸ್ ಮಾಡಲು ನೀವು useMemo() ಅನ್ನು ಬಳಸಬಹುದು:

import React, { useState, useMemo } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]); // items ಅಥವಾ filter ಬದಲಾದರೆ ಮಾತ್ರ ಮರು-ಲೆಕ್ಕಾಚಾರ ಮಾಡಿ

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

ಈಗ, items ಪ್ರಾಪ್ ಅಥವಾ filter ಸ್ಟೇಟ್ ಬದಲಾದರೆ ಮಾತ್ರ filteredItems ಅರೇ ಮರು-ಲೆಕ್ಕಾಚಾರಗೊಳ್ಳುತ್ತದೆ.

ತೀರ್ಮಾನ

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

ಹೆಚ್ಚಿನ ಸಂಪನ್ಮೂಲಗಳು

• ರೆಂಡರಿಂಗ್ ಎಲಿಮೆಂಟ್‌ಗಳ ಕುರಿತು ರಿಯಾಕ್ಟ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್
• ಸ್ಟೇಟ್ ಮತ್ತು ಲೈಫ್‌ಸೈಕಲ್ ಕುರಿತು ರಿಯಾಕ್ಟ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್
• ಹುಕ್ಸ್ ಕುರಿತು ರಿಯಾಕ್ಟ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್
• ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವ ಕುರಿತು ರಿಯಾಕ್ಟ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್