React List Keys: Neden Düzenlenen Metin Yanlış Satırda Kalıyor

React'te bir listeyi render ederken key olarak array indexini kullanırsan, sıralama yaptığında garip bir şey olur: bir satırda yazdığın not, başka bir kaydın satırına takılıp kalıyor.

Bunun sebebi şu: React, hangi editor state'inin hangi satıra ait olduğunu belirlemek için key'i kullanıyor. Index key'i kullanırsan, React "birinci satır", "ikinci satır" diye pozisyonları takip ediyor. Sıralama sonrası o pozisyonda başka bir kayıt olsa da, editor state'i aynı pozisyonda kalıyor. Sonuç: yazılan not, farklı bir kaydın satırında görünüyor.

Örneğin, ilk satırda "Cache invalidation review" kaydında not yazıyorsun. Sonra listeyi tersine çeviriyorsun. İlk satırda artık başka bir kayıt var, ama senin yazdığın not hâlâ orada duruyor, yalnız artık yanlış kaydın yanında.

Çözüm basit: index yerine her kaydın benzersiz ID'sini key olarak kullan. Böylece React, kaydı sıralama sonrası nereye giterse gitsin, editor state'ini doğru kaydla eşleştirebiliyor.

TechWebster'ın makalesinde bu sorunu gösteren çalışan bir örnek var. Kodu kopyalayıp App.jsx'e yapıştırıp, önce index key'lerle deneyin, sonra record ID'leriyle. Fark hemen belli olacak.

Praktik not: Eğer listeni dinamik olarak sıralıyor, filtreliyor ya da siliyorsan, her zaman benzersiz bir ID'yi key olarak kullan. Index sadece statik, hiç değişmeyen listelerde güvenli.