React 'Re-render' ಎಂದು ಹೇಳಿದಾಗ, ಅದರ ಅರ್ಥ ಮೂರು ವಿಷಯಗಳು
ನೀವು setState ಅನ್ನು ಕರೆ ಮಾಡಿದಾಗ, React ಕೇವಲ DOM ಅನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುವುದಿಲ್ಲ. ಅದು ಒಂದು ಕ್ರಮದಲ್ಲಿ ಮೂರು ಪ್ರತ್ಯೇಕ ಹಂತಗಳನ್ನು (phases) ನಡೆಸುತ್ತದೆ. ಹೆಚ್ಚಿನ ಡೆವಲಪರ್ಗಳು ಈ ಹಂತಗಳನ್ನು ಗೊಂದಲಕ್ಕೀಡು ಮಾಡಿಕೊಳ್ಳುತ್ತಾರೆ. ಈ ವ್ಯತ್ಯಾಸವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಪರ್ಫಾರ್ಮೆನ್ಸ್ (performance) ಸಮಸ್ಯೆಗಳನ್ನು ಸರಿಪಡಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಮೂರು ಹಂತಗಳು:
• Render: React ನಿಮ್ಮ component ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆಯುತ್ತದೆ. • Reconcile: React ಹೊಸ ಔಟ್ಪುಟ್ ಅನ್ನು ಹಳೆಯದರೊಂದಿಗೆ ಹೋಲಿಸುತ್ತದೆ. • Commit: React ಬದಲಾವಣೆಗಳನ್ನು DOM ಗೆ ಅನ್ವಯಿಸುತ್ತದೆ.
- Render ಹಂತ (The Render Phase)
React ನಿಮ್ಮ ಫಂಕ್ಷನ್ ಅನ್ನು ರನ್ ಮಾಡುತ್ತದೆ. ಇದು ಪ್ರಸ್ತುತ props ಅನ್ನು ಬಳಸುತ್ತದೆ. ಫಂಕ್ಷನ್ JSX ಅನ್ನು ರಿಟರ್ನ್ ಮಾಡುತ್ತದೆ. ಈ JSX ಎಂಬುದು ಕೇವಲ JavaScript ಆಬ್ಜೆಕ್ಟ್ಗಳ ಪಟ್ಟಿ. ಜನರು ಇದನ್ನು virtual DOM ಎಂದು ಕರೆಯುತ್ತಾರೆ. ಇದು ನಿಜವಾದ DOM ಅಲ್ಲ. ಇದು UI ಹೇಗಿರಬೇಕು ಎಂಬ ವಿವರಣೆಯಾಗಿದೆ. ಇನ್ನೂ ಸ್ಕ್ರೀನ್ ಮೇಲೆ ಏನೂ ಕಾಣಿಸುವುದಿಲ್ಲ. ಈ ಹಂತವು ಸಂಪೂರ್ಣವಾಗಿ ಗಣಿತ ಮತ್ತು ತರ್ಕಕ್ಕೆ (math and logic) ಸಂಬಂಧಿಸಿದ್ದಾಗಿದೆ.
- Reconcile ಹಂತ (The Reconcile Phase)
React ಹಳೆಯ tree ಮತ್ತು ಹೊಸ tree ಅನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುತ್ತದೆ. ಅವುಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಇದು ಹುಡುಕುತ್ತದೆ. ಒಂದು ವೇಳೆ element type ಬದಲಾದರೆ, React ಇಡೀ tree ಅನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಕೇವಲ props ಬದಲಾದರೆ, React ಅವುಗಳನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತದೆ. ಇಲ್ಲಿ keys ಬಹಳ ಮುಖ್ಯವಾಗುತ್ತವೆ. Keys ಗಳು ಪಟ್ಟಿಯಲ್ಲಿರುವ ಐಟಂಗಳನ್ನು ಅವುಗಳ ಸ್ಥಾನದ (position) ಬದಲಿಗೆ ಗುರುತಿನ (identity) ಮೂಲಕ ಹೊಂದಿಸಲು React ಗೆ ಸಹಾಯ ಮಾಡುತ್ತವೆ. ಈ ಹಂತವು DOM ಅನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡಲು ಬೇಕಾದ ಕನಿಷ್ಠ ಹಂತಗಳ ಪಟ್ಟಿಯನ್ನು ಸಿದ್ಧಪಡಿಸುತ್ತದೆ.
- Commit ಹಂತ (The Commit Phase)
React ಬದಲಾವಣೆಗಳ ಪಟ್ಟಿಯನ್ನು ತೆಗೆದುಕೊಂಡು ನಿಜವಾದ DOM ಅನ್ನು ಸ್ಪರ್ಶಿಸುತ್ತದೆ (touches). ಇದು ಹೊಸ nodes ಅನ್ನು ರಚಿಸುತ್ತದೆ ಮತ್ತು ಹಳೆಯವುಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ಬಳಕೆದಾರರು ಸ್ಕ್ರೀನ್ ಮೇಲೆ ಬದಲಾವಣೆಗಳನ್ನು ನೋಡುವ ಸಮಯ ಇದೇ ಆಗಿದೆ. ಇದರ ನಂತರ, ಬ್ರೌಸರ್ ಸ್ಕ್ರೀನ್ ಅನ್ನು ಪೇಂಟ್ ಮಾಡುತ್ತದೆ (paints). ನಂತರ, useEffect ರನ್ ಆಗುತ್ತದೆ.
ಸಾಮಾನ್ಯ ತಪ್ಪು ಕಲ್ಪನೆಗಳು:
• ಒಂದು re-render ಯಾವಾಗಲೂ DOM ಅನ್ನು ಬದಲಾಯಿಸುವುದಿಲ್ಲ. ಔಟ್ಪುಟ್ ಒಂದೇ ಆಗಿದ್ದರೆ, React commit ಹಂತದಲ್ಲಿ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ.
• React.memo ಫಂಕ್ಷನ್ ಕರೆಯನ್ನು ತಪ್ಪಿಸುತ್ತದೆ (skips). ಆದರೆ ಇದು DOM ಅಪ್ಡೇಟ್ ಅನ್ನು ತಪ್ಪಿಸುವುದಿಲ್ಲ.
• Props ಗಳು re-renders ಅನ್ನು ಟ್ರಿಗ್ಗರ್ ಮಾಡುವುದಿಲ್ಲ. ಪೇರೆಂಟ್ (parent) re-render ಆಗುವುದು ಚೈಲ್ಡ್ (child) ಅನ್ನು ಟ್ರಿಗ್ಗರ್ ಮಾಡುತ್ತದೆ. Prop ಬದಲಾವಣೆಯು ಕೇವಲ ಅದರ ಪರಿಣಾಮವಾಗಿದೆ.
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಸರಿಪಡಿಸುವುದು ಹೇಗೆ:
ನಿಮ್ಮ ಫಂಕ್ಷನ್ ನಿಧಾನವಾಗಿದ್ದರೆ, ಅದು Render ಸಮಸ್ಯೆ. ಭಾರೀ ಕೆಲಸಗಳನ್ನು (heavy work) ಫಂಕ್ಷನ್ನಿಂದ ಹೊರಗೆ ತನ್ನಿ ಅಥವಾ memoization ಬಳಸಿ.
React ದೊಡ್ಡ ಪಟ್ಟಿಗಳನ್ನು ಮರುನಿರ್ಮಾಣ ಮಾಡುತ್ತಿದ್ದರೆ, ಅದು Reconcile ಸಮಸ್ಯೆ. ನಿಮ್ಮ keys ಅನ್ನು ಪರಿಶೀಲಿಸಿ.
DOM ಅತಿಯಾಗಿ ಅಪ್ಡೇಟ್ ಆಗುತ್ತಿದ್ದರೆ, ಅದು Commit ಸಮಸ್ಯೆ. virtualization ಬಳಸಿ ಅಥವಾ ನಿಮ್ಮ structure ಅನ್ನು ಬದಲಾಯಿಸಿ.
React 19 ಮತ್ತು React Compiler ಈಗ ಈ ಕೆಲಸದ ಹೆಚ್ಚಿನ ಭಾಗವನ್ನು ನಿಮಗಾಗಿ ನಿರ್ವಹಿಸುತ್ತವೆ. ಆದರೆ ಈ ಹಂತಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು ಉತ್ತಮವಾಗಿ ಡಿಬಗ್ (debug) ಮಾಡಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.