React Key Prop'una Neden İhtiyacınız Var
Konsolunuzda şu hatayı görüyorsunuz: "Each child in a list should have a unique 'key' prop."
Birçok geliştirici bunu görmezden gelir. Bu bir hatadır. Bu uyarı sizi performans sorunları ve potansiyel hatalar hakkında bilgilendirir.
Key prop nedir?
React'in bir listedeki belirli öğeleri tanımlamasına yardımcı olur. React'e hangi öğenin değiştiğini, taşındığını veya kaldırıldığını söyler. Bir key olmadan React, herhangi bir şey değiştiğinde tüm listeyi yeniden render eder. Bu da uygulamanızı yavaşlatır.
1000 kitabın olduğu bir kütüphane düşünün. Ortaya yeni bir kitap eklerseniz, yer açmak için diğer tüm kitapları kaydırmanız gerekir. Key, her kitap için benzersiz bir ID gibi davranır. React'in diğer her şeyi hareket ettirmeden tam noktayı bulmasını sağlar.
Reconciliation Süreci
React, yeni Virtual DOM'u eskisiyle karşılaştırmak için bir diffing algoritması kullanır.
- State değişir.
- React yeni bir ağaç (tree) oluşturur.
- React, ağaçları key'leri kullanarak karşılaştırır.
- React sadece değişen öğeleri günceller.
Yaygın hata: Dizi indeksini (array index) key olarak kullanmak.
Listeniz değişiyorsa asla key={index} kullanmayın. Eğer öğe ekler veya silerseniz, her öğenin indeksi kayar. React'in kafası karışacaktır ve aslında değişmeyen öğeleri yeniden render edecektir. Bu durum bellek israfına yol açar ve UI hatalarına neden olur.
Nasıl düzeltilir:
- Veritabanınızdan gelen kararlı (stable) bir ID kullanın (örneğin
user.id). - Verilerinizde bir ID yoksa
uuidgibi benzersiz bir string kullanın. - Key'ler için
Math.random()kullanmaktan kaçının. Her render işleminde yeni bir ID oluşturur, bu da bileşenlerin yeniden mount edilmesine (re-mount) neden olur ve UI'da titremeye (flickering) yol açar.
En iyi uygulamalar:
- Key'ler kararlı (stable) olmalıdır.
- Key'ler kardeş bileşenler (siblings) arasında benzersiz olmalıdır.
- En iyi performans için veritabanı ID'lerini kullanın.
Key Karşılaştırma Tablosu:
• Veritabanı ID'si: Önerilir. Kararlı ve hızlıdır. • Dizi İndeksi: Önerilmez. Sıralama veya filtreleme sırasında hatalara neden olur. • Math.random(): Kaçının. Gereksiz re-mount işlemlerine neden olur.
İş akışınız için özet:
Eğer bu hatayı görüyorsanız, bileşenlerinizin kalıcı bir tanımlayıcısı eksik demektir. API yanıtınızda email veya ID gibi benzersiz alanlar olup olmadığını kontrol edin. Gereksiz re-render işlemlerinden %30-40 tasarruf etmek için bunu düzeltin.