React Key Prop'una Neden İhtiyacınız Var
Konsolunuzda şu uyarıyı görürsünüz: "Each child in a list should have a unique 'key' prop."
Birçok geliştirici bunu görmezden gelir. Bu bir hatadır. Key prop'u sadece bir uyarı değildir; performans ve hata önleme için bir araçtır.
Key prop'u ne işe yarar?
React, liste öğelerini tanımlamak için key'i kullanır. React'e hangi öğenin değiştiğini, taşındığını veya kaldırıldığını söyler.
Bir key olmadan React, tüm listeyi yeniden render etmek (re-render) zorunda kalır. Bu, uygulamanızı yavaşlatır ve veri hatalarına yol açar.
Kütüphane Örneği
1.000 kitabın olduğu bir kütüphane hayal edin. Eğer ortaya yeni bir kitap eklerseniz, yer açmak için diğer tüm kitapları kaydırmanız gerekir.
React'te key, benzersiz bir ID görevi görür. Her öğeye bir kimlik kazandırır. Reconciliation süreci sırasında React, yeni listeyi eskisiyle karşılaştırır.
Key Eksikliğinin Yarattığı Sorun
Eğer key'i atlamışsanız, React her öğenin aynı olduğunu düşünür. Başlangıca bir öğe eklerseniz, React tüm listenin değiştiğini sanır. DOM'daki her bir öğeyi yeniden oluşturur. Bu da bellek ve CPU tüketir.
İndeks Tuzağı
Yeni geliştiriciler genellikle dizi indeksini (array index) key olarak kullanır.
Örnek: key={index}
Bu, dinamik listeler için tehlikelidir. Öğeleri sıralarsanız, filtreler veya silerseniz indeks değişir. Bu da hatalı UI durumlarına ve bug'lara yol açar.
Key Kullanımı İçin En İyi Uygulamalar
- Veritabanınızdaki kararlı (stable) ID'leri kullanın (örneğin
user.id). - Key'lerin kardeş öğeler arasında benzersiz olduğundan emin olun.
- Key olarak
Math.random()kullanmaktan kaçının. Her render'da değişir ve UI'da titremeye (flickering) neden olur. - Verinizde bir ID yoksa, veriyi çektiğinizde
uuidveyananoidkullanarak bir tane oluşturun.
Key Seçim Rehberi
• Veritabanı ID'si: En iyisi. Oldukça kararlı ve hızlıdır. • Dizi İndeksi: Yalnızca hiç değişmeyen statik listeler için kullanın. • Math.random(): Kaçının. Gereksiz re-mount işlemlerine zorlar.
Özet
İyi bir key uygulamanızı hızlandırır. Gereksiz re-render işlemlerini %40'a kadar azaltabilir. Her zaman kararlı ve benzersiz tanımlayıcılara öncelik verin.