Bir liste render ettiğinizde, React hangi öğenin hangisi olduğunu render ler arasında bilmesi gerekir, böylece DOM düğümlerini doğru şekilde yeniden kullanabilir, yeniden sıralayabilir, ekleyebilir veya silebilir. key bu kimlik.
{users.map(user => (
<Row key={user.id} user={user} />
))}
Index'i key olarak kullanmak React'e "0. konumdaki öğe daha önce olduğu aynı öğedir" demek — bu da liste yeniden sıralanır veya başından ekleme/silme yaparsanız anında bozulur:
// 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.
Gerçek bir belirti: input'ların bir listesinde bir satırda yazı yazma işlemi silme/sıralama sonrasında başka bir satıra "atlar", çünkü React yanlış <input> yeniden kullanmıştır (ve iç value/focus değerini).
user.id, slug).Keys, reconciliation algoritmasına bir ipucudur; bunları doğru almak hem performansı hem de bileşen durumunu doğru tutmanızı sağlar.