React Native'de FlatList, büyük veri kümelerini verimli bir şekilde listelemek için optimize edilmiş bir bileşendir. Ancak yanlış kullanıldığında gereksiz yeniden renderlar, düşük kare hızı ve artan bellek tüketimi gibi performans sorunlarına yol açabilir. Bu yazıda, FlatList ile maksimum performans elde etmek için uygulayabileceğiniz pratik ipuçlarını ve kaçınılması gereken hataları adım adım ele alıyoruz.
1. Doğru Props Kullanımı
FlatList'in bazı props'ları performansı doğrudan etkiler. Aşağıdaki noktalara dikkat edin:
- keyExtractor: Her bir öğe için benzersiz ve kararlı bir anahtar sağlayın. Bu sayede React, hangi öğelerin güncellenmesi gerektiğini hızlıca belirleyebilir. Örnek:
keyExtractor={(item) => item.id.toString()} - getItemLayout: Sabit yükseklikte öğeleriniz varsa mutlaka kullanın. Bu, listenin kaydırma pozisyonunu hesaplamak için öğelerin boyutlarını ölçmek zorunda kalmaz, büyük performans artışı sağlar. Örnek:
getItemLayout={(data, index) => ({ length: 80, offset: 80 * index, index })} - initialNumToRender: İlk render edilecek öğe sayısını ayarlayın. Varsayılan 10'dur, ancak ekran boyutuna göre optimize edilebilir. Genellikle ekranı dolduran sayıdan biraz fazla olması yeterlidir.
- maxToRenderPerBatch ve windowSize: Kaydırma sırasında aynı anda render edilecek öğe sayısını kontrol eder. windowSize'ı 5-10 arasında tutmak genellikle iyi bir dengedir.
2. Liste Öğelerini Optimize Edin
Her bir liste öğesi (renderItem) minimize ve saf olmalıdır:
- React.memo kullanın: Öğe bileşeninizi
React.memoile sarmalayarak props değişmediğinde yeniden renderı önleyin. - İç içe bileşenlerden kaçının: Render fonksiyonu içinde başka bileşenler oluşturmayın. Bunun yerine bileşeni dışarıya taşıyın.
- Gereksiz hesaplamaları önleyin: Öğe içindeki hesaplamaları
useMemoile cache'leyin veya veriyi önceden işleyin. - Sabit stiller kullanın: Stilleri mümkünse
StyleSheet.createile dışarıda tanımlayın, inline style kullanmayın.
3. Veri Kaynağını Yönetin
FlatList'in performansı, veri kaynağının nasıl güncellendiğine de bağlıdır:
- Veriyi immutable güncelleyin: Diziyi doğrudan mutasyona uğratmak yerine yeni bir dizi oluşturun. Örn:
setData(prev => [...prev, newItem]) - Sayfalama kullanın: Tüm veriyi bir kerede yüklemek yerine, kaydırma sonunda yeni veri çekin (onEndReached ile). İlgili API çağrılarınızda verimli hata yönetimi için REST API Hata Yönetimi makalemize göz atabilirsiniz.
- Önbellekleme stratejisi uygulayın: Sık kullanılan verileri yerel olarak cache'leyin. API Caching Best Practices yazımızda Redis ve HTTP önbellekleme hakkında detaylı bilgi bulabilirsiniz.
4. Gereksiz Renderları Azaltın
FlatList'in alt bileşenlerinde state veya context kullanırken dikkatli olun:
- Context kullanırken parçalara ayırın: Tüm listenin aynı context'e bağlı olması, her değişiklikte tüm öğelerin yeniden renderına neden olur. Context'i daha küçük parçalara bölün.
- useCallback ile fonksiyonları sabitleyin: renderItem içinde kullanılan callback'leri (ör. onPress) useCallback ile sarmalayarak her render'da yeniden oluşmasını engelleyin.
- FlatList dışında state tutun: Liste ile ilgili state (ör. seçili öğe) FlatList'in dışında yönetilmeli, her öğe bu state'i props olarak almalı.
5. Sık Yapılan Hatalar ve Kaçınılması Gerekenler
- Anonim fonksiyonlar kullanmak: renderItem içinde anonim fonksiyon kullanmayın. Her render'da yeni bir fonksiyon oluşur ve React.memo çalışmaz.
- keyExtractor kullanmamak: FlatList uyarı verir ve performans düşer.
- Tüm veriyi bir kerede yüklemek: Büyük listelerde uygulama donabilir.
- ScrollView ile karıştırmak: FlatList yerine ScrollView kullanmak tüm öğeleri aynı anda render eder, performans sorunlarına yol açar.
6. Kontrol Listesi
Aşağıdaki maddeleri uygulayarak FlatList performansınızı en üst düzeye çıkarabilirsiniz:
- ✅ keyExtractor eklendi
- ✅ getItemLayout varsa tanımlandı
- ✅ initialNumToRender uygun değerde ayarlandı
- ✅ maxToRenderPerBatch ve windowSize optimize edildi
- ✅ renderItem bileşeni React.memo ile sarıldı
- ✅ Stiller StyleSheet.create ile dışarıda tanımlandı
- ✅ Veri immutable yöntemlerle güncelleniyor
- ✅ Sayfalama (onEndReached) kullanılıyor
- ✅ useCallback ve useMemo kullanıldı
- ✅ Anonim fonksiyon kullanılmıyor
Ayrıca, React Native'de state yönetimi ve test yaklaşımları hakkında daha fazla bilgi edinmek için Flutter Widget Test vs Integration Test makalemizi ve React'te Custom Hook Oluşturma rehberimizi inceleyebilirsiniz. Bu ipuçlarıyla FlatList'inizi performanslı hale getirerek kullanıcı deneyimini artırabilirsiniz.
Sık Sorulan Sorular
FlatList ile ScrollView arasındaki temel fark nedir?
FlatList yalnızca ekranda görünen öğeleri render ederken (virtualization), ScrollView tüm öğeleri aynı anda render eder. Büyük listeler için FlatList çok daha performanslıdır.
getItemLayout ne zaman kullanılmalıdır?
Tüm liste öğeleri aynı yükseklikte veya genişlikte ise getItemLayout kullanılmalıdır. Bu, kaydırma pozisyonunun hesaplanmasını hızlandırarak performansı önemli ölçüde artırır.
React.memo her zaman gerekli midir?
Öğe bileşeniniz sık sık gereksiz yeniden render alıyorsa veya karmaşık hesaplamalar içeriyorsa React.memo kullanmak faydalıdır. Basit öğeler için ek yük oluşturabileceğinden dikkatli kullanılmalıdır.
