React ile çalışırken listelerde anahtarları nasıl…

React'te anahtarlar, listelerdeki öğeleri tanımlamak için kullanılır. Bu, React'in kullanıcı arayüzünü verimli bir şekilde güncellemesine yardımcı olur, hangi öğelerin değiştiğini, eklendiğini veya kaldırıldığını belirleyerek.

Anahtarların atanmasıyla ilgili temel ilkeler:

Benzersizlik: Her anahtar, aynı listedeki komşu öğeler arasında benzersiz olmalıdır.
İstikrar: Anahtar, bileşenin yaşam döngüsü boyunca aynı öğe için sabit kalmalıdır, hatta yeniden render edilse bile.

Anahtar atama konusunda en iyi yöntemler:

Verilerin benzersiz bir kimliğini kullanma: Verilerinizin stabil ve benzersiz bir ID'si (örneğin, veritabanından id) varsa, onu anahtar olarak kullanın.

// Benzersiz bir id'ye sahip nesne dizisi olduğunu varsayalım
const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Bu yöntem, verilerdeki herhangi bir değişiklikte (yeniden sıralama, ekleme, silme) anahtarın istikrarını sağlar ve en çok önerilen yoldur.

Dizi indeksini kullanma (dikkatli olunmalı): Sadece çok özel durumlarda, örneğin:
- Liste statik ve hiç değişmiyorsa.
- Liste öğeleri hiçbir zaman yeniden sıralanmıyorsa, eklenmiyor veya silinmiyorsa.
- Liste filtrelenmiyorsa.
```
// Öğelerin hiç değişmeyeceği garanti ediliyorsa
const items = ['Item 1', 'Item 2', 'Item 3'];

function StaticItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```
Önemli: İstikrarsız listelerde indeks kullanmak, UI'da yanlış davranışlara, öğelerin durumunun kaybolmasına (örneğin, input içindeki metin) veya verimsiz yeniden render'a neden olabilir. React, anahtarların yanlış eşleştirilmesi nedeniyle bileşenleri yanlış şekilde yeniden kullanabilir.

Verilerin kombinasyonuna dayalı anahtar üretimi: Eğer verilerinizin benzersiz bir ID'si yoksa, birkaç stabil özelliğin birleşimiyle karmaşık bir anahtar oluşturabilirsiniz. Ancak, bu, tek bir ID kullanmaktan daha az tercih edilir.

// Örnek: isim ve tarih kombinasyonu
const events = [
  { name: 'Parti', date: '2023-10-26' },
  { name: 'Toplantı', date: '2023-10-27' },
];

function EventList({ events }) {
  return (
    <ul>
      {events.map(event => (
        <li key={`${event.name}-${event.date}`}>{`${event.name} - ${event.date}`}</li>
      ))}
    </ul>
  );
}

Özetle: en güvenli ve tercih edilen yöntem, her zaman benzersiz ve stabil bir veri kimliği kullanmaktır. İndeks kullanımı, çok özel durumlar ve yalnızca statik listeler için makuldür.

React ile çalışırken listelerde anahtarları nasıl sıralıyorsunuz?