key özniteliği

Her liste öğesine benzersiz bir key verilmesinin nedenini öğrenirsin.

key özniteliği

React, listeden hangi öğeyi ekleyip çıkardığını anlamak için her düğüme bir key vermeni ister. key, o öğenin benzersiz kimliğidir.

key'i doğrudan <li> üzerine yazarsın: <li key={item.id}>. React key'lere bakarak hangi li'nin değiştiğini bulur ve yalnızca onu günceller.

key'ler kardeşler arasında benzersiz olmalı; liste boyunca değil. Aynı key iki kez kullanılmaz.

Kararlı key seçimi

En iyi key, veride zaten var olan benzersiz bir alandır: id, e-posta, kullanıcı adı. Böyle bir alan yoksa veriye id ekle.

key'i Math.random() gibi rastgele üretmek yanlıştır: her render'da yeni key oluşur, React her şeyi yeniden çizer.

Sayma sayıları (0,1,2) yalnızca liste sonuna eklenen ve hiç çıkarılmayan durumlarda işe yarar.

Uygulama ListWithKeys bileşeni

Aşağıdaki iskeleti tamamla. ListWithKeys bileşeni yaz; items dizisinde her öğenin id ve name alanı var. .map() ile her öğeyi <li key={item.id}>{item.name}</li> yap. Dışa aktar.

Örnek çözümü göster

function ListWithKeys() {
  const items = [{ id: 1, name: "Ayşe" }, { id: 2, name: "Mehmet" }];
  return <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}

export default ListWithKeys;

Kendini test et

key özniteliği: eksik parçayı tamamla

<li key={____}>{item.name}</li>

Cevabı göster

<li key={item.id}>{item.name}</li>

key olarak dizi indeksi ne zaman sorun yaratır?
```
React wants stable identity; the index is not stable.
```
- Hiç sorun yaratmaz
- Sadece büyük listelerde
- Öğeler eklendiğinde veya çıkarıldığında
- Yalnızca metinlerde
Cevabı göster

Öğeler eklendiğinde veya çıkarıldığında — Liste ortasına ekleme/çıkarma yapılırsa indeks kayar, React yanlış düğümü günceller.
key özniteliği: kavramları eşleştir

id alanı

En iyi key
Math.random()

Yanlış key
indeks

Sadece append listeler
aynı key iki kez

Yasak

Sıradaki ders: Diziden bileşen

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler