Dizi indeksini anahtar olarak geçirirsen ne olur?

React'ta anahtar (key) olarak dizinin indeksini kullanmak, bileşenlerin performansı ve güncellenme doğruluğu konusunda sorunlara yol açabilir. Öğelerin sırası değiştiğinde veya öğeler eklenip çıkarıldığında, indeksler değişir ve React yanlış bileşenleri eşleştirebilir, bu da gereksiz yeniden çizimlere veya durum kaybına neden olur.

Örneğin, bir listeye sahipseniz:

{items.map((item, index) => (
  <ListItem key={index} item={item} />
))}

Ve dizinin başına yeni bir öğe eklerseniz, tüm anahtarlar kayar ve React neredeyse tüm bileşenleri yeniden oluşturur, oysa sadece bir tanesini güncelleyebilirsiniz.

Verilerden benzersiz ve kararlı tanımlayıcılar kullanmak daha iyidir, örneğin id:

{items.map(item => (
  <ListItem key={item.id} item={item} />
))}