ನಿಮಗೆ React Key Prop ಏಕೆ ಬೇಕು
ನಿಮ್ಮ ಕನ್ಸೋಲ್ನಲ್ಲಿ ನೀವು ಈ ಎಚ್ಚರಿಕೆಯನ್ನು ನೋಡಬಹುದು: "Each child in a list should have a unique 'key' prop."
ಅನೇಕ ಡೆವಲಪರ್ಗಳು ಇದನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತಾರೆ. ಇದು ತಪ್ಪು. key prop ಎಂಬುದು ಕೇವಲ ಒಂದು ಎಚ್ಚರಿಕೆಯಲ್ಲ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆ (performance) ಮತ್ತು ದೋಷಗಳ ತಡೆಗಟ್ಟುವಿಕೆಗಾಗಿ (bug prevention) ಇರುವ ಒಂದು ಸಾಧನವಾಗಿದೆ.
key prop ಏನು ಮಾಡುತ್ತದೆ?
ಪಟ್ಟಿಯ ಐಟಂಗಳನ್ನು ಗುರುತಿಸಲು React key ಅನ್ನು ಬಳಸುತ್ತದೆ. ಯಾವ ಐಟಂ ಬದಲಾಗಿದೆ, ಸ್ಥಳಾಂತರಗೊಂಡಿದೆ ಅಥವಾ ತೆಗೆದುಹಾಕಲ್ಪಟ್ಟಿದೆ ಎಂಬುದನ್ನು ಇದು React ಗೆ ತಿಳಿಸುತ್ತದೆ.
key ಇಲ್ಲದಿದ್ದರೆ, React ಇಡೀ ಪಟ್ಟಿಯನ್ನು re-render ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನ ವೇಗವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಡೇಟಾ ದೋಷಗಳಿಗೆ (data bugs) ಕಾರಣವಾಗುತ್ತದೆ.
ಲೈಬ್ರರಿ ಉದಾಹರಣೆ
1,000 ಪುಸ್ತಕಗಳಿರುವ ಒಂದು ಲೈಬ್ರರಿಯನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ನೀವು ಮಧ್ಯದಲ್ಲಿ ಹೊಸ ಪುಸ್ತಕವನ್ನು ಸೇರಿಸಿದರೆ, ಜಾಗ ಮಾಡಿಕೊಡಲು ನೀವು ಉಳಿದ ಎಲ್ಲಾ ಪುಸ್ತಕಗಳನ್ನು ಸ್ಥಳಾಂತರಿಸಬೇಕಾಗುತ್ತದೆ.
React ನಲ್ಲಿ, key ಒಂದು ವಿಶಿಷ್ಟ ID ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ಪ್ರತಿಯೊಂದು ಎಲಿಮೆಂಟ್ಗೆ ಒಂದು ಗುರುತನ್ನು ನೀಡುತ್ತದೆ. reconciliation ಪ್ರಕ್ರಿಯೆಯ ಸಮಯದಲ್ಲಿ, React ಹೊಸ ಪಟ್ಟಿಯನ್ನು ಹಳೆಯ ಪಟ್ಟಿಯೊಂದಿಗೆ ಹೋಲಿಸುತ್ತದೆ.
Key ಇಲ್ಲದಿದ್ದರೆ ಉಂಟಾಗುವ ಸಮಸ್ಯೆಗಳು
ನೀವು key ಅನ್ನು ಬಿಟ್ಟರೆ, React ಪ್ರತಿಯೊಂದು ಐಟಂವೂ ಒಂದೇ ಎಂದು ಭಾವಿಸುತ್ತದೆ. ನೀವು ಆರಂಭದಲ್ಲಿ ಒಂದು ಐಟಂ ಅನ್ನು ಸೇರಿಸಿದರೆ, ಇಡೀ ಪಟ್ಟಿಯೇ ಬದಲಾಗಿದೆ ಎಂದು React ಭಾವಿಸುತ್ತದೆ. ಇದು DOM ನಲ್ಲಿ ಪ್ರತಿಯೊಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಮರುಸೃಷ್ಟಿಸುತ್ತದೆ. ಇದು ಮೆಮೊರಿ ಮತ್ತು CPU ಅನ್ನು ವ್ಯರ್ಥ ಮಾಡುತ್ತದೆ.
The Index Trap
ಹೊಸ ಡೆವಲಪರ್ಗಳು ಹೆಚ್ಚಾಗಿ array index ಅನ್ನು key ಆಗಿ ಬಳಸುತ್ತಾರೆ.
ಉದಾಹರಣೆ: key={index}
ಇದು ಡೈನಾಮಿಕ್ ಪಟ್ಟಿಗಳಿಗೆ ಅಪಾಯಕಾರಿ. ನೀವು ಐಟಂಗಳನ್ನು sort, filter ಅಥವಾ delete ಮಾಡಿದರೆ, index ಬದಲಾಗುತ್ತದೆ. ಇದು ತಪ್ಪಾದ UI ಸ್ಥಿತಿಗಳು ಮತ್ತು ದೋಷಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
Keys ಗಾಗಿ ಉತ್ತಮ ಪದ್ಧತಿಗಳು (Best Practices)
- ನಿಮ್ಮ ಡೇಟಾಬೇಸ್ನಿಂದ ಸ್ಥಿರವಾದ (stable) IDs ಬಳಸಿ (ಉದಾಹರಣೆಗೆ
user.id). - siblings ಗಳ ನಡುವೆ keys ವಿಶಿಷ್ಟವಾಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- key ಆಗಿ
Math.random()ಬಳಸುವುದು ತಪ್ಪಿಸಿ. ಇದು ಪ್ರತಿ render ಸಮಯದಲ್ಲಿ ಬದಲಾಗುತ್ತದೆ ಮತ್ತು UI flickering ಉಂಟುಮಾಡುತ್ತದೆ. - ನಿಮ್ಮ ಡೇಟಾದಲ್ಲಿ ID ಇಲ್ಲದಿದ್ದರೆ, ಡೇಟಾವನ್ನು fetch ಮಾಡುವಾಗ
uuidಅಥವಾnanoidಬಳಸಿ ಒಂದನ್ನು ರಚಿಸಿ.
Key ಆಯ್ಕೆ ಮಾಡುವ ಮಾರ್ಗದರ್ಶಿ
• Database ID: ಅತ್ಯುತ್ತಮ. ಹೆಚ್ಚು ಸ್ಥಿರ ಮತ್ತು ವೇಗವಾಗಿದೆ. • Array Index: ಎಂದಿಗೂ ಬದಲಾಗದ static ಪಟ್ಟಿಗಳಿಗೆ ಮಾತ್ರ ಬಳಸಿ. • Math.random(): ತಪ್ಪಿಸಿ. ಇದು ಅನಗತ್ಯ re-mounts ಅನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ.
ಸಾರಾಂಶ
ಒಂದು ಉತ್ತಮ key ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ವೇಗವಾಗಿಸುತ್ತದೆ. ಇದು ಅನಗತ್ಯ re-renders ಅನ್ನು 40% ರಷ್ಟು ಕಡಿಮೆ ಮಾಡಬಹುದು. ಯಾವಾಗಲೂ ಸ್ಥಿರ ಮತ್ತು ವಿಶಿಷ್ಟ ಗುರುತಿಸುವಿಕೆಗಳಿಗೆ (identifiers) ಆದ್ಯತೆ ನೀಡಿ.