FlatList: nedir, React Native'de API ve optimizasyon

FlatList nedir?

FlatList, büyük veri kümelerinin yüksek performanslı render edilmesiyle sanallaştırılmış bir liste uygulayan React Native bileşenidir. Bileşen, VirtualizedList üzerine inşa edilmiştir ve her karmaşıklıkta düz listeler oluşturmak için bildirimsel bir API sağlar.

FlatList, React Native 0.43'te kullanımdan kaldırılan ListView'in yerini almak üzere tanıtıldı. Meta'ya (2026) göre FlatList, listelerle çalışan React Native uygulamalarının %85'inde kullanılmaktadır. Bileşen, tüm yaygın senaryoları destekler: kişiler, haber akışları, ürün katalogları ve sohbetler.

Tarihçe ve ekosistemdeki yeri

FlatList'ten önce geliştiriciler, manuel hücre yeniden kullanım yapılandırması gerektiren ListView'i kullanıyordu. FlatList, Android'deki RecyclerView (2014) ve iOS'teki UICollectionView'e (2012) benzer pencereli render uygulayarak bu süreci otomatikleştirdi. Modern projelerde FlatList, her liste için fiili standarttır.

FlatList sanallaştırması nasıl çalışır

FlatList sanallaştırması, bileşenin yalnızca ekranın görünür alanına düşen öğeleri ve her iki tarafta küçük bir arabelleği render ettiği bir mekanizmadır. Kalan öğeler DOM'da oluşturulmaz, bu da bellek tasarrufu sağlar ve render'ı hızlandırır.

Kaydırma sırasında FlatList, önceden oluşturulmuş View hücrelerini yeniden kullanarak verilerini değiştirir. Bu, 10.000 öğelik bir liste için binlerce View oluşturulmasını önler. Varsayılan arabellek boyutu, görünür alanın üstünde ve altında 10 öğedir, ancak windowSize aracılığıyla yapılandırılabilir.

Bu parametrelerin optimum yapılandırması, kaydırma akıcılığı ve bellek tüketimi arasında denge kurmayı sağlar. Büyük öğeleri olan listeler için windowSize'in 5-7'ye düşürülmesi önerilir.

FlatList API ve temel prop'lar

FlatList API, liste görüntüleme ve davranışını yapılandırmak için bir dizi prop içerir. İki zorunlu prop, data (veri dizisi) ve renderItem'dır (öğe render işlevi). keyExtractor, her öğe için benzersiz bir anahtar sağlayarak performansı artırır.

import React from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

const App = () => {
  const data = Array.from({ length: 100 }, (_, i) => ({
    id: i.toString(),
    title: `Item #${i + 1}`,
  }));

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.title}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
};

ItemSeparatorComponent öğeler arasına ayırıcı ekler, ListHeaderComponent ve ListFooterComponent listeye başlık ve altbilgi ekler. Bu, ek sarmalayıcılar olmadan karmaşık düzenler oluşturmayı sağlar.

const styles = StyleSheet.create({
  item: {
    padding: 16,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  separator: {
    height: 1,
    backgroundColor: '#ccc',
  },
});

FlatList performans optimizasyonu

FlatList optimizasyonu, yüzlerce ve binlerce öğeye sahip uygulamalar için kritiktir. Doğru yapılandırma olmadan liste kaydırma sırasında yavaşlayabilir, aşırı bellek tüketebilir ve düşük güçlü cihazlarda çökmelere neden olabilir.

İlk kural, benzersiz ve kararlı tanımlayıcılarla keyExtractor kullanmaktır. Dizinleri anahtar olarak kullanmak, yanlış hücre yeniden kullanımına ve durum hatalarına yol açar. İkinci kural, renderItem'ı useCallback ile sarmak ve öğe bileşeni için React.memo kullanmaktır.

Sabit yükseklik için getItemLayout

Tüm öğeler aynı yüksekliğe sahipse, getItemLayout FlatList'in bileşenleri ölçmeden kaydırma konumunu hesaplamasını sağlar. Bu, özellikle belirli bir dizine kaydırma yaparken önemli bir performans artışı sağlar.

const ITEM_HEIGHT = 80;

const getItemLayout = (data, index) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

<FlatList
  data={data}
  getItemLayout={getItemLayout}
  renderItem={renderItem}
/FlatList>

Veriler için useMemo gereksiz yeniden render'ları önler. Veriler bir API'den geliyorsa, bir kez dönüştürün ve önbelleğe alın. Değişmeyen öğelerin render edilmesini önlemek için öğe bileşeni için React.memo kullanın.

Yatay listeler ve karuseller

Yatay FlatList, horizontal={true} prop'u eklenerek oluşturulur. Liste, kaydırma yönünü X eksenine değiştirir; bu, ürün karuselleri, resim galerileri ve yatay menüler için kullanışlıdır.

Yatay modda, yerel karusellerde olduğu gibi adım adım kaydırma için snapToInterval ve snapToAlignment'ı doğru yapılandırmak önemlidir. Bileşen, momentumu ve parmak kaldırmayı otomatik olarak işler ve en yakın öğede durur.

<FlatList
  horizontal
  data={images}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  showsHorizontalScrollIndicator={false}
  snapToInterval={CARD_WIDTH + GAP}
  snapToAlignment="start"
  decelerationRate="fast"
  pagingEnabled
  onViewableItemsChanged={onViewableItemsChanged}
/>

onViewableItemsChanged, görünür öğeler değiştiğinde tetiklenen bir geri çağrıdır. Analitik, tembel resim yükleme ve yalnızca görünür kartlar için video etkinleştirme amacıyla kullanılır.

Çek-yenile ve sonsuz kaydırma

Çek-yenile, FlatList'te refreshing ve onRefresh prop'ları aracılığıyla uygulanır ve bir yükleme durumuyla birlikte çalışır. Liste aşağı çekildiğinde onRefresh çağrılır ve refreshing bayrağı tekrarlanan çağrıları engeller.

Sonsuz kaydırma, onEndReached aracılığıyla yapılandırılır — listenin sonuna yaklaşıldığında tetiklenen bir geri çağrı. onEndReachedThreshold, olayın sınırdan kaç öğe önce tetikleneceğini belirler. Genellikle imleç tabanlı sayfalama kullanılır.

const ListWithPagination = () => {
  const [data, setData] = React.useState([]);
  const [page, setPage] = React.useState(1);
  const [refreshing, setRefreshing] = React.useState(false);

  const loadMore = React.useCallback(async () => {
    const newData = await fetchPage(page);
    setData(prev => [...prev, ...newData]);
    setPage(p => p + 1);
  }, [page]);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      refreshing={refreshing}
      onRefresh={loadMore}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
    />
  );
};

Önemli: onEndReached birden çok kez çağrılabilir. Önceki istek tamamlanana kadar tekrarlanan istekleri engellemek için bir isLoading bayrağı ekleyin. Yüklemeyi belirtmek için ListFooterComponent'te ActivityIndicator kullanın.