React में Key के रूप में Index का उपयोग करना एक बुरा विचार क्यों है
आप React में एक डायनामिक लिस्ट बनाते हैं। आप एक आइटम को डिलीट करते हैं। अचानक, किसी दूसरे आइटम की UI state बदल जाती है। या, आप एक लिस्ट को सॉर्ट करते हैं और इनपुट डेटा गलत कंपोनेंट्स में दिखाई देने लगता है।
ऐसा इसलिए होता है क्योंकि आपने array index का उपयोग key के रूप में किया है।
React आपके UI को अपडेट करने के लिए Virtual DOM नामक सिस्टम का उपयोग करता है। जब आपकी state बदलती है, तो React नए tree की तुलना पुराने tree से करता है। इस प्रक्रिया को reconciliation कहा जाता है।
key prop आपके कंपोनेंट्स के लिए एक ID कार्ड की तरह काम करता है। यह React को बताता है:
- कौन सा आइटम बदला है।
- कौन सा आइटम नया है।
- कौन सा आइटम हटाया गया है।
यदि आप index को key के रूप में उपयोग करते हैं, तो आप समस्याएँ पैदा करते हैं। Arrays डायनामिक होते हैं। जब आप आइटम्स को जोड़ते हैं, हटाते हैं, या उनका क्रम बदलते हैं, तो index बदल जाता है।
यहाँ बताया गया है कि यह क्यों विफल होता है:
Performance संबंधी समस्याएँ यदि आप लिस्ट की शुरुआत में कोई आइटम डालते हैं, तो उसके बाद के हर एक आइटम को एक नया index मिल जाता है। React को लगता है कि हर आइटम बदल गया है। यह केवल नए आइटम के बजाय पूरी लिस्ट को re-render कर देता है।
State Bugs यह सबसे खतरनाक हिस्सा है। यदि आपके लिस्ट आइटम्स में इनपुट फ़ील्ड या चेकबॉक्स जैसी internal state है, तो index बग्स (bugs) पैदा करेगा।
कल्पना कीजिए कि आप पहले टास्क के इनपुट में "Important" टाइप करते हैं। आप उस टास्क को डिलीट कर देते हैं। यदि आपने index को key के रूप में उपयोग किया है, तो React देखता है कि Index 0 अभी भी मौजूद है। यह पुराने कंपोनेंट का पुन: उपयोग (reuse) करता है। अब, आपका "Important" टेक्स्ट दूसरे टास्क के इनपुट बॉक्स में दिखाई देने लगता है।
इसे सही तरीके से कैसे करें:
- Database IDs का उपयोग करें: हमेशा अपने डेटाबेस से प्राप्त यूनिक ID (जैसे
_idयाid) का उपयोग करें। - Frontend पर IDs जेनरेट करें: यदि आपके पास डेटाबेस नहीं है, तो
uuidयाnanoidजैसी लाइब्रेरी का उपयोग करें। - Browser APIs का उपयोग करें: यूनिक IDs बनाने के लिए built-in तरीके के रूप में
window.crypto.randomUUID()का उपयोग करें।
आप सुरक्षित रूप से index का उपयोग कब कर सकते हैं? केवल तभी जब आपकी लिस्ट इन तीन नियमों का पालन करती हो:
- लिस्ट स्टैटिक है (कोई जोड़ना या हटाना नहीं)।
- लिस्ट का क्रम कभी नहीं बदलता (कोई सॉर्टिंग या फ़िल्टरिंग नहीं)।
- आइटम्स में कोई internal state नहीं है (कोई इनपुट या चेकबॉक्स नहीं)।
अपने ऐप्स को तेज़ और बग-मुक्त रखने के लिए index को key के रूप में उपयोग करना बंद करें।