React'te key nedir?

28 Haziran 2025

Daha önce React yazıyorken muhtemelen key ile alakalı aşağıdaki gibi bir warning almışsınızdır.

Warning: each child in a list should have a unique "key" prop.

Belki de gördüğünüz bir React projesinde bir component'te key property'sinin kullanıldığını farketmişsinizdir. Peki bu key aslında nedir? Ne işe yarıyor? Kullanılmadığında neden böyle bir hata veriyor?

React'in temel konseptlerinden biri aslında bu key property'si. React resmi dokümanlarında şu şekilde bir ifade kullanılmış:

Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree. ¹

Key property'si, React'e her bir dizideki öğenin hangi bileşene karşılık geldiğini söyler, böylece React bunları sonradan eşleştirebilir. Bu dizideki öğeler yer değiştirebiliyorsa (örneğin sıralama nedeniyle), yeni öğeler eklenebiliyorsa ya da silinebiliyorsa önemli hale gelir. İyi seçilmiş bir key, React'in tam olarak ne olduğunu anlamasına yardımcı olur ve doğru şekilde DOM ağacını günceller.

Key property'sini en çok gördüğümüz yer bir diziyi map() fonksiyonu ile bir componente dönüştürdüğümüz yerlerdir.

const fruits = [
  { id: 1, value: "apple" },
  { id: 2, value: "peach" },
  { id: 3, value: "banana" },
];

fruits.map((fruit) => {
  return <p key={fruit.id}>{fruit.value}</p>;
});

Peki tamam tanıma baktık, kullanımını da gördük ama bu key neden önemli?

Aslında key property kullanmaktaki olay React'in bir componenti çizerken onun tam anlamıyla ne olduğunu bilmek istemesinden ve eşleştirmeye çalışmasından ibaret. Componentleri ayırt ederken bu şekilde componente sanki bir kimlik vermek onun hatalı render edilmesinin önüne geçiyor. Bu durum aynı zamanda performans için de önem arz ediyor.

Key doğru kullanılmazsa diziye yapılan değişikliklerde stateler doğru aktarılmayabilir. Bundan dolayı index değerinin key olarak kullanılması önerilmez. Bunu bir örnek ile inceleyelim.

❌ Yanlış Kullanım

const data = [
  { id: 1, value: "apple" },
  { id: 2, value: "peach" },
  { id: 3, value: "banana" }
]

const [fruits, setFruits] = useState(data);

const handleRemove = (id) => {
  const newFruits = fruits.filter((fruit) => fruit.id !== id);
  setFruits(newFruits);
}

return(
  {fruits.map((fruit, index) => {
    return <button key={index} onClick={() => {handleRemove(fruit.id)}} />
  })}
);

Yukarıdaki örnekte key olarak index değeri kullanılıyor ve bu önerilen bir kullanım değil. Sebebi ise liste değiştiğinde her öğenin konumu (index'i) değişir ama kimliği (id) değişmez. Bir öğe silindiğinde, kalan öğelerin index'leri bir kayar ve React yanlış öğeyi eşleyebilir.

Ne Olur? (Örnek Durum)

Başlangıçta:

[
  { id: 1, value: "apple" }, // index 0
  { id: 2, value: "peach" }, // index 1
  { id: 3, value: "banana" }, // index 2
];

key={index} olduğundan buttonlar index değerine göre eşlendi.

peach değerli butona tıklandığında ve peach silindiğinde:

[
  { id: 1, value: "apple" }, // index 0
  { id: 3, value: "banana" }, // index 1 ← bu artık peach’in yerine geçti
];

Ama React, key=1 olan DOM öğesinin “aynı öğe” olduğunu varsayar, çünkü index hala 1. Bu nedenle:

peach’e ait DOM’u banana'ya verir.
Yanlış eşleşme olur.
Özellikle component içinde form varsa input içindeki değer, state ya da focus gibi durumlar yanlış öğeye aktarılabilir.

✅ Doğru Kullanım

return(
  {fruits.map((fruit) => {
    return <button key={fruit.id} onClick={() => {handleRemove(fruit.id)}} />
  })}
);

Üstte key={index} yerine key={fruit.id} kullandık. Bu şekilde React, her öğeyi kendi id'sine göre izler. Liste değişse bile hangi öğenin hangi DOM’la ilişkili olduğunu doğru takip eder.

📝 Dipnot: Her ne kadar index kullanımı önerilmese de dizinin modifiyeye uğramayacağı, statik kalacağı durumlarda key olarak index kullanılabilir.

React'te key kullanımı, liste render'larının doğru ve verimli olmasını sağlar. Yanlış key seçimi sadece performans değil, aynı zamanda mantık hatalarına da sebep olabilir.

Kısacası React ile çalışırken liste öğeleri için key kullanımına dikkat edin ve mümkün olduğunca index yerine benzersiz bir kimlik kullanmaya çalışın.