ನಿಮಗೆ React Key Prop ಏಕೆ ಬೇಕು
ನಿಮ್ಮ ಕನ್ಸೋಲ್ನಲ್ಲಿ ಈ ಎಚ್ಚರಿಕೆಯನ್ನು ನೀವು ನೋಡಬಹುದು: "Each child in a list should have a unique 'key' prop."
ಅನೇಕ ಡೆವಲಪರ್ಗಳು ಇದನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತಾರೆ. ಇದು ತಪ್ಪು. ಈ ಎಚ್ಚರಿಕೆಯು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳು (performance issues) ಮತ್ತು ಸಂಭವನೀಯ ಬಗ್ಗಳ (bugs) ಬಗ್ಗೆ ನಿಮಗೆ ತಿಳಿಸುತ್ತದೆ.
key prop ಎಂದರೇನು?
ಇದು ಪಟ್ಟಿಯಲ್ಲಿರುವ (list) ನಿರ್ದಿಷ್ಟ ಐಟಂಗಳನ್ನು ಗುರುತಿಸಲು React ಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಯಾವ ಐಟಂ ಬದಲಾಗಿದೆ, ಚಲಿಸಿದೆ ಅಥವಾ ತೆಗೆದುಹಾಕಲ್ಪಟ್ಟಿದೆ ಎಂಬುದನ್ನು ಇದು React ಗೆ ತಿಳಿಸುತ್ತದೆ. key ಇಲ್ಲದಿದ್ದರೆ, ಪ್ರತಿ ಬಾರಿ ಏನಾದರೂ ಬದಲಾದಾಗಲೂ React ಇಡೀ ಪಟ್ಟಿಯನ್ನು ಮರು-ರೆಂಡರ್ (re-render) ಮಾಡುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನ ವೇಗವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
1000 ಪುಸ್ತಕಗಳಿರುವ ಒಂದು ಲೈಬ್ರರಿಯನ್ನು ನೆನಪಿಸಿಕೊಳ್ಳಿ. ನೀವು ಮಧ್ಯದಲ್ಲಿ ಒಂದು ಹೊಸ ಪುಸ್ತಕವನ್ನು ಸೇರಿಸಿದರೆ, ಜಾಗ ಮಾಡಿಕೊಡಲು ನೀವು ಉಳಿದ ಎಲ್ಲಾ ಪುಸ್ತಕಗಳನ್ನು ಸ್ಥಳಾಂತರಿಸಬೇಕಾಗುತ್ತದೆ. key ಪ್ರತಿಯೊಂದು ಪುಸ್ತಕಕ್ಕೂ ಒಂದು ವಿಶಿಷ್ಟವಾದ ID ನಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ಉಳಿದ ಎಲ್ಲವನ್ನೂ ಸ್ಥಳಾಂತರಿಸದೆ ನಿಖರವಾದ ಸ್ಥಳವನ್ನು ಕಂಡುಹಿಡಿಯಲು React ಗೆ ಅನುಮತಿಸುತ್ತದೆ.
Reconciliation ಪ್ರಕ್ರಿಯೆ
React ಹೊಸ Virtual DOM ಅನ್ನು ಹಳೆಯದರೊಂದಿಗೆ ಹೋಲಿಸಲು diffing algorithm ಅನ್ನು ಬಳಸುತ್ತದೆ.
- State ಬದಲಾಗುತ್ತದೆ.
- React ಹೊಸ tree ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ.
- React keys ಬಳಸಿ tree ಗಳನ್ನು ಹೋಲಿಸುತ್ತದೆ.
- React ಬದಲಾದ ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಮಾತ್ರ ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತದೆ.
ಸಾಮಾನ್ಯ ತಪ್ಪು: array index ಅನ್ನು key ಆಗಿ ಬಳಸುವುದು.
ನಿಮ್ಮ ಪಟ್ಟಿಯು ಬದಲಾಗುತ್ತಿದ್ದರೆ ಎಂದಿಗೂ key={index} ಬಳಸಬೇಡಿ. ನೀವು ಐಟಂಗಳನ್ನು ಸೇರಿಸಿದರೆ ಅಥವಾ ಡಿಲೀಟ್ ಮಾಡಿದರೆ, ಪ್ರತಿಯೊಂದು ಐಟಂನ index ಬದಲಾಗುತ್ತದೆ. ಇದರಿಂದ React ಗೊಂದಲಕ್ಕೀಡಾಗಬಹುದು ಮತ್ತು ವಾಸ್ತವವಾಗಿ ಬದಲಾಗದ ಐಟಂಗಳನ್ನು ಕೂಡ ಮರು-ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ಇದು ಮೆಮೊರಿಯನ್ನು ವ್ಯರ್ಥ ಮಾಡುತ್ತದೆ ಮತ್ತು UI ಬಗ್ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
ಇದನ್ನು ಸರಿಪಡಿಸುವುದು ಹೇಗೆ:
- ನಿಮ್ಮ ಡೇಟಾಬೇಸ್ನಿಂದ ಸ್ಥಿರವಾದ (stable) ID ಅನ್ನು ಬಳಸಿ (ಉದಾಹರಣೆಗೆ
user.id). - ನಿಮ್ಮ ಡೇಟಾದಲ್ಲಿ ID ಇಲ್ಲದಿದ್ದರೆ
uuidನಂತಹ ವಿಶಿಷ್ಟವಾದ ಸ್ಟ್ರಿಂಗ್ ಬಳಸಿ. - Keys ಗಾಗಿ
Math.random()ಬಳಸಬೇಡಿ. ಇದು ಪ್ರತಿ ರೆಂಡರ್ ಮಾಡುವಾಗ ಹೊಸ ID ಅನ್ನು ರಚಿಸುತ್ತದೆ, ಇದು ಕಾಂಪೊನೆಂಟ್ಗಳನ್ನು ಮರು-ಮೌಂಟ್ (re-mount) ಮಾಡಲು ಒತ್ತಾಯಿಸುತ್ತದೆ ಮತ್ತು UI ಫ್ಲಿಕ್ಕರಿಂಗ್ಗೆ (flickering) ಕಾರಣವಾಗುತ್ತದೆ.
ಉತ್ತಮ ಪದ್ಧತಿಗಳು (Best practices):
- Keys ಸ್ಥಿರವಾಗಿರಬೇಕು.
- ಒಂದೇ ಮಟ್ಟದಲ್ಲಿರುವ (siblings) ಐಟಂಗಳ ನಡುವೆ Keys ವಿಶಿಷ್ಟವಾಗಿರಬೇಕು.
- ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಡೇಟಾಬೇಸ್ ID ಗಳನ್ನು ಬಳಸಿ.
Key ಹೋಲಿಕೆ ಕೋಷ್ಟಕ:
• Database ID: ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಸ್ಥಿರ ಮತ್ತು ವೇಗವಾಗಿದೆ. • Array Index: ಶಿಫಾರಸು ಮಾಡಲಾಗಿಲ್ಲ. Sorting ಅಥವಾ filtering ಮಾಡುವಾಗ ಬಗ್ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ. • Math.random(): ತಪ್ಪಿಸಿ. ಅನಗತ್ಯ ಮರು-ಮೌಂಟ್ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
ನಿಮ್ಮ ಕೆಲಸದ ಪ್ರಕ್ರಿಯೆಗಾಗಿ (workflow) ಸಾರಾಂಶ:
ನೀವು ಈ ಎಚ್ಚರಿಕೆಯನ್ನು ನೋಡಿದರೆ, ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ಗಳು ಶಾಶ್ವತ ಗುರುತಿನ ಚೀಟಿಯನ್ನು (permanent identifier) ಹೊಂದಿಲ್ಲ ಎಂದರ್ಥ. ನಿಮ್ಮ API ರೆಸ್ಪಾನ್ಸ್ನಲ್ಲಿ email ಅಥವಾ ID ನಂತಹ ವಿಶಿಷ್ಟ ಫೀಲ್ಡ್ಗಳಿವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ. ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್ಗಳನ್ನು 30-40% ಕಡಿಮೆ ಮಾಡಲು ಇದನ್ನು ಸರಿಪಡಿಸಿ.