სიის რენდერირებისას React-ს სჭირდება გაიცნობოს რომელი ელემენტი რომელია რენდერებებს შორის, რათა სწორად დააბრუნოს, გადააწყოს, ჩამოიტანოს ან წაშალოს DOM ხელმისაწვდომი. key არის ეს იდენტობა.
{users.map(user => (
<Row key={user.id} user={user} /> // stable, unique id
))}
index-ის გამოყენება 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.
რეალური სიმპტომი: input-ების სია, სადაც ერთ ხაზში აკრეფა სხვა ხაზში "ხტება" წაშლის/დახარისხების შემდეგ, რადგან React ხელმისაწვდომი გამოიყენა არასწორი <input> (და მის შიგნით არსებული მნიშვნელობა/focus).
user.id, slug).Keys არის მინიშვნება შემტეხი ალგორითმისთვის; მათი სწორი დაყენება ინარჩუნებს როგორც სიმძლავრეს, ასევე კომპონენტის state-ს სწორს.