जेव्हा तुम्ही एक लिस्ट रेंडर करता, तर 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.
एक खरी लक्षणे: इनपुट्सची एक लिस्ट जिथे एका पंक्तीमध्ये टाइपिंग हटवल्यानंतर/सॉर्ट केल्यानंतर दुसर्या पंक्तीमध्ये "उडी" मारते, कारण React ने चुकीचा <input> (आणि त्याचे अंतर्गत मूल्य/फोकस) पुनर्वापरले.
user.id, एक स्लग).Keys हे समेटणी अल्गोरिदमला एक इशारा आहेत; त्यांना योग्यरित्या मिळवणे कार्यप्रदर्शन आणि घटक अवस्था दोन्ही सुरक्षित ठेवते.