React Native'de FlatList, uzun ve dinamik listeleri performanslı bir şekilde görüntülemek için kullanılan en temel bileşendir. Eğer elinde 10 tane değil de, 1000 tane veri varsa ve bunları ScrollView ile listelemeye çalışırsan uygulama şişer ve kasar. İşte FlatList burada devreye girer.

İşleyişini ve neden bu kadar önemli olduğunu madde madde inceleyelim:

1. Temel Mantık: "Sadece Görüneni Oluştur"

FlatList'in en büyük sihri Lazy Rendering (Tembel Yükleme) yapmasıdır.

• ScrollView: Listedeki tüm elemanları (örneğin 500 ürün) aynı anda render eder (çizer). Bu da bellek kullanımını uçurur.

• FlatList: Sadece o an ekranda görünen ve ekranın hemen altında/üstünde yer alan birkaç elemanı render eder. Sen aşağı kaydırdıkça, üstte kalanları bellekten atar ve alttakileri oluşturur.

2. Olmazsa Olmaz 3 Parametresi

Bir FlatList kullanmak için şu üç prop (özellik) zorunludur:

1. data: Listelemek istediğin veri dizisi (Array).

2. renderItem: Her bir satırın nasıl görüneceğini belirleyen fonksiyon.

3. keyExtractor: Her bir elemana özel, eşsiz bir kimlik (ID) atayan fonksiyon (React'in elemanları takip edebilmesi için).

3. FlatList'in Güçlü Özellikleri

Sadece liste basmakla kalmaz, içinde hayat kurtaran birçok yerleşik özellik barındırır:

• numColumns: Verileri yan yana sütunlar halinde dizebilirsin (Izgara/Grid görünümü).

• onRefresh ve refreshing: "Pull-to-refresh" (yukarıdan çekince yenileme) özelliğini iki satırla eklemeni sağlar.

• onEndReached: Listenin sonuna yaklaşıldığında yeni verileri yüklemek için kullanılır (Sonsuz kaydırma - Infinite Scroll).

• ListHeaderComponent / ListFooterComponent: Listenin en başına veya en sonuna (kaydırmayla beraber hareket eden) özel bölümler eklemeni sağlar.

• ItemSeparatorComponent: Elemanların arasına çizgi veya boşluk eklemek için kullanılır.

Basit Bir Örnek

Az önceki koduna benzer, en yalın hali şöyledir:

<FlatList
  data={USER_DATA}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  )}
/>

Özetle

Eğer uygulanda bir liste (rehber, mesajlar, ürün listesi vb.) varsa ve bu listenin uzunluğu değişebiliyorsa, kesinlikle FlatList kullanmalısın. Performans dostudur ve mobil cihazın kaynaklarını verimli kullanır.

• t