React'te key Prop'u: Küçük Detay, Büyük Bug

React'te key Prop'u: Küçük Detay, Büyük Bug

React ile çalışan geliştiricilerin sıkça gördüğü ama çoğu zaman yeterince önem vermediği konulardan biri key prop kullanımıdır. Genellikle liste render ederken React'in verdiği uyarıyı kaldırmak için hızlıca bir key eklenir ve konu kapatılır. Ancak key prop aslında sadece bir uyarıyı ortadan kaldırmak için değil, React'in doğru çalışabilmesi için oldukça kritik bir rol oynar.

React, UI güncellemelerini yönetirken Virtual DOM kullanır. State değiştiğinde React yeni Virtual DOM'u oluşturur ve eski haliyle karşılaştırarak sadece değişen kısımları günceller. Bu karşılaştırma sürecine reconciliation denir. İşte key prop tam olarak bu noktada devreye girer. React, liste içerisindeki elemanları takip edebilmek için key değerlerini kullanır. Eğer key değerleri doğru verilmezse React hangi elemanın değiştiğini doğru şekilde anlayamaz.

Bu durum küçük gibi görünse de gerçek projelerde oldukça karmaşık bug'lara neden olabilir.

Basit Bir Örnek

Aşağıdaki örneği ele alalım:

const users = ["Ali", "Veli", "Ayşe"];

return (
  <ul>
    {users.map((user, index) => (
      <li key={index}>{user}</li>
    ))}
  </ul>
);

Bu kullanım çoğu zaman sorunsuz çalışır. Hatta birçok geliştirici bu şekilde key kullanır. Ancak listenin dinamik olduğu durumlarda sorunlar ortaya çıkmaya başlar.

Örneğin listenin başına yeni bir kullanıcı eklediğimizi düşünelim:

setUsers(["Fatma", ...users]);

React burada index değerlerine göre karşılaştırma yapar. Bu durumda React şu şekilde düşünür:

• Ali artık Fatma oldu

• Veli artık Ali oldu

• Ayşe artık Veli oldu

React elemanları yeniden oluşturmak yerine mevcut elemanları günceller. Bu da beklenmeyen davranışlara neden olabilir.

Gerçek Bir Bug Senaryosu

Özellikle input içeren listelerde bu durum çok daha belirgin hale gelir:

{users.map((user, index) => (
  <input key={index} defaultValue={user} />
))}

Kullanıcı input'ları düzenledikten sonra listeye yeni bir eleman eklendiğinde, input değerlerinin kaydığı görülür. Çünkü React DOM elemanlarını yeniden oluşturmamış, sadece içerikleri değiştirmiştir.

Bu bug'ı ilk gördüğünüzde neden olduğunu anlamak oldukça zor olabilir. Ancak sorun aslında yanlış key kullanımından kaynaklanır.

Doğru Kullanım

Bu tür durumlarda benzersiz ve sabit bir key kullanmak gerekir:

const users = [
  { id: 1, name: "Ali" },
  { id: 2, name: "Veli" },
  { id: 3, name: "Ayşe" }
];

return (
  <ul>
    {users.map(user => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

Bu şekilde React her elemanı doğru şekilde takip edebilir ve sadece değişen elemanları günceller.

Key Sadece Performans Değil, Davranış Meselesidir

Çoğu zaman key kullanımının performansla ilgili olduğu düşünülür. Ancak aslında key sadece performans değil, aynı zamanda component davranışını da etkiler.

Örneğin bir component'in state'i olduğunu düşünelim:

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

Burada key değişirse React component'i yeniden oluşturur. Key sabit kalırsa component state korunur. Bu nedenle key prop component lifecycle davranışını da etkiler.

Index Kullanmak Ne Zaman Kabul Edilebilir?

Index kullanımı tamamen yanlış değildir. Ancak bazı durumlarda kabul edilebilir:

• Liste statik ise

• Liste sırası değişmiyorsa

• Listeye eleman eklenip çıkarılmıyorsa

Bu durumlar dışında index kullanımı genellikle önerilmez.

Bir Başka Yaygın Hata

Bazı durumlarda geliştiriciler random key üretir:

{items.map(item => (
  <Component key={Math.random()} />
))}

Bu kullanım performans açısından oldukça kötü bir yaklaşımdır. Çünkü her render'da key değişir ve React tüm componentleri yeniden oluşturur.

Bu da gereksiz render'lara ve performans problemlerine yol açar.

Sonuç

React'te key prop küçük bir detay gibi görünse de oldukça kritik bir konudur. Yanlış key kullanımı beklenmeyen bug'lara, state kaymalarına ve performans problemlerine neden olabilir.

İyi bir React geliştirici için key kullanımını anlamak oldukça önemlidir. Çünkü bu konu sadece syntax değil, React'in çalışma mantığını anlamayı gerektirir.

Çoğu zaman küçük görünen detaylar büyük problemlere yol açar. React'te key prop da bu detaylardan biridir.