React Listeleri ve Key Kullanımında Ustalaşın
React'te listeleri render etmek basittir, ancak bunu doğru yapmak zordur.
Birçok geliştirici dizi indeksini (array index) key olarak kullanır. Bu bir hatadır. Hatalara ve yavaş performansa yol açar.
React'te dinamik verileri nasıl yönetmeniz gerektiğini aşağıda bulabilirsiniz.
React Listeleri Nasıl Kullanır
React, dizileri UI öğelerine dönüştürmek için map() metodunu kullanır. map() kullandığınızda, React her bir veri parçasını bir bileşene (component) dönüştürür.
Key'lerin Rolü React, Virtual DOM kullanır. Veri değiştiğinde React, yeni veriyi eski veriyle karşılaştırır. Bu işleme reconciliation (uzlaştırma) denir.
Key'ler benzersiz tanımlayıcılar olarak görev yapar. React'e tam olarak hangi öğenin değiştiğini, taşındığını veya silindiğini söylerler.
İndeksi Key Olarak Kullanmanın Tehlikeleri İndeksi (0, 1, 2...) key olarak kullanmak üç ana soruna yol açar:
- Bileşen Durum (State) Hataları: Bir listeyi sıralarsanız, giriş alanları veya onay kutuları yanlış öğeye ait verileri gösterebilir.
- Performans Düşüşleri: React hangi öğenin hangisi olduğunu takip edemez. Genellikle sadece tek bir öğe yerine tüm listeyi yeniden render eder.
- Görsel Hatalar: Kullanıcı arayüzünüz (UI) doğru görünebilir ancak öğeler yer değiştirdiğinde dahili mantık hata verecektir.
Key Kullanımının Doğru Yolu Uygulamanızı hızlı ve kararlı tutmak için şu kurallara uyun:
- Benzersiz ID'ler Kullanın: Her zaman veritabanınızdaki ID'leri (bir UUID veya bir birincil anahtar gibi) kullanın.
- Asla
Math.random()Kullanmayın: Render sırasında key oluşturmak, React'in her güncellemede her bir öğeyi yeniden oluşturmasına neden olur. Bu, performansı öldürür. - Key'leri Kararlı Tutun: Bir key, aynı veri parçası için tüm yaşam döngüsü boyunca aynı kalmalıdır.
Bir Bakışta Karşılaştırma
Özellik: Kararlılık İndeks Kullanımı: Kararsız Benzersiz ID Kullanımı: Oldukça Kararlı
Özellik: Performans İndeks Kullanımı: Düşük Benzersiz ID Kullanımı: Optimal
Özellik: Durum (State) Güvenliği İndeks Kullanımı: Güvensiz Benzersiz ID Kullanımı: %100 Güvenli
Geliştiriciler İçin Özet
map() metodunu kullanın. key prop'una benzersiz ve kararlı bir ID geçirin. Değişebilen, sıralanabilen veya filtrelenebilen herhangi bir liste için dizi indeksini kullanmaktan kaçının.