जब आप एक सूची प्रस्तुत करते हैं, तो React को यह जानने के लिए एक तरीके की आवश्यकता है कि कौन सा आइटम कौन सा है रेंडर्स के बीच ताकि वह DOM नोड्स को सही तरीके से पुनः उपयोग, पुनः क्रम में, सम्मिलित, या हटा सके। key वह पहचान है।
{users.map(user => (
<Row key={user.id} user={user} />
))}
इंडेक्स को key के रूप में उपयोग करने से React को "स्थिति 0 पर आइटम पहले जैसा ही आइटम है" का संकेत मिलता है — जो तुरंत टूट जाता है जब सूची को पुनः क्रम में किया जाता है, या आप आगे से सम्मिलित/हटाते हैं:
// items: [A, B, C] with keys 0,1,2
// you DELETE A → [B, C], keys become 0,1
// React thinks key 0 (was A) is now B, key 1 (was B) is now C...
// so it keeps the wrong DOM state with the wrong item.
वास्तविक लक्षण: inputs की एक सूची जहां एक पंक्ति में typing दूसरी पंक्ति को "कूद" जाती है, क्योंकि React ने गलत <input> का पुनः उपयोग किया (और इसके आंतरिक मान/फोकस)।
user.id, एक slug)।Keys reconciliation algorithm के लिए एक संकेत हैं; उन्हें सही तरीके से प्राप्त करने से performance और component state दोनों सही रहते हैं।