FlatList: mi ez, API és optimalizálás React Native-ban

Mi a FlatList?

FlatList — egy React Native komponens, amely virtualizált listát valósít meg nagy mennyiségű adat hatékony renderelésével. A komponens a VirtualizedList-re épül, és deklaratív API-t biztosít bármilyen összetettségű lapos listák létrehozásához.

A FlatList a React Native 0.43-ban jelent meg az elavult ListView helyettesítőjeként. A Meta adatai szerint (2026) a FlatList a React Native alkalmazások 85%-ában használatos, amelyek listákkal dolgoznak. A komponens támogatja az összes gyakori forgatókönyvet: névjegyek, hírfolyamok, termékkatalógusok, chat-ek.

Történet és hely az ökoszisztémában

A FlatList megjelenése előtt a fejlesztők a ListView-t használták, amely a cellák újrahasznosításának kézi konfigurálását igényelte. A FlatList automatizálta ezt a folyamatot az ablakos renderelés bevezetésével, hasonlóan az Android RecyclerView-jához (2014) és az iOS UICollectionView-jához (2012). Modern projektekben a FlatList a de facto szabvány minden lista számára.

Hogyan működik a FlatList virtualizációja

FlatList virtualizáció — az a mechanizmus, amelyben a komponens csak a képernyő látható részén lévő elemeket rendereli, plusz egy kis puffert mindkét oldalon. A többi elem nem jön létre a DOM-ban, ami memóriát takarít meg és felgyorsítja a renderelést.

Görgetéskor a FlatList újrahasznosítja a már létrehozott View cellákat, kicserélve bennük az adatokat. Ez megakadályozza több ezer View létrehozását egy 10 000 elemből álló lista esetén. Az alapértelmezett puffer mérete 10 elem a látható terület felett és alatt, de a windowSize segítségével konfigurálható.

Ezen paraméterek optimális konfigurálása lehetővé teszi a görgetés simasága és a memóriahasználat közötti egyensúly megteremtését. Nagy elemeket tartalmazó listák esetén ajánlott a windowSize 5-7-re csökkentése.

FlatList API és főbb props-ok

FlatList API props-ok sorozatát tartalmazza a lista megjelenésének és viselkedésének konfigurálásához. Két kötelező prop — data (adat tömb) és renderItem (az elem renderelő függvénye). A keyExtractor növeli a teljesítményt egyedi kulcs biztosításával minden elemhez.

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 elválasztót ad az elemek közé, ListHeaderComponent és ListFooterComponent — a lista fejlécét és láblécét. Ez lehetővé teszi összetett elrendezések létrehozását további csomagolás nélkül.

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

FlatList teljesítményének optimalizálása

FlatList optimalizálása kritikus fontosságú a több száz és ezer elemet tartalmazó alkalmazásoknál. Helyes konfigurálás nélkül a lista lelassulhat görgetéskor, túlzott memóriát fogyaszthat és összeomlásokat okozhat gyengébb eszközökön.

Első szabály — használjon keyExtractor-t egyedi és stabil azonosítókkal. Az indexek kulcsként való használata a cellák helytelen újrahasznosításához és állapothibákhoz vezet. Második — csomagolja a renderItem-t useCallback-be és használja a React.memo-t az elem komponenséhez.

getItemLayout rögzített magassághoz

Ha az összes elem azonos magasságú, a getItemLayout lehetővé teszi a FlatList számára a görgetési pozíció kiszámítását a komponensek mérése nélkül. Ez jelentős teljesítménynövekedést eredményez, különösen egy adott indexre görgetéskor.

const ITEM_HEIGHT = 80;

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

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

useMemo az adatokhoz megakadályozza a szükségtelen újrarendereléseket. Ha az adatok API-ból érkeznek, alakítsa át őket egyszer és gyorsítótárazza. Használja a React.memo-t az elem komponenséhez a változatlan elemek renderelésének elkerülésére.

Vízszintes listák és körhinták

Vízszintes FlatList a horizontal={true} prop hozzáadásával jön létre. A lista a görgetés irányát az X tengelyre változtatja, ami kényelmes termékkörhintákhoz, képgalériákhoz és vízszintes menükhöz.

Vízszintes módban fontos a snapToInterval és snapToAlignment helyes beállítása a lépésenkénti görgetéshez, mint a natív körhintákban. A komponens automatikusan kezeli a lendületet és az ujj elengedését, a legközelebbi elemnél megállva.

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

onViewableItemsChanged — callback, amely a látható elemek változásakor hívódik meg. Analitikához, képek lusta betöltéséhez és videó aktiválásához használatos csak a látható kártyák esetén.

Pull-to-refresh és végtelen betöltés

Pull-to-refresh a FlatList-ben a refreshing és onRefresh props-ok segítségével valósul meg, amelyek a betöltési állapottal együtt működnek. A lista lefelé húzásakor az onRefresh meghívódik, a refreshing jelző pedig blokkolja az ismételt hívásokat.

Végtelen betöltés (infinite scroll) az onEndReached-en keresztül konfigurálható — egy callback, amely a lista végének közeledtekor aktiválódik. Az onEndReachedThreshold határozza meg, hány elemmel a vége előtt aktiválódik az esemény. Lapozáshoz általában cursor-based megközelítést használnak.

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}
    />
  );
};

Fontos: az onEndReached többször is meghívódhat. Adjon hozzá egy isLoading jelzőt az ismételt kérések blokkolásához, amíg az előző be nem fejeződött. Használja az ActivityIndicator-t a ListFooterComponent-ben a betöltés jelzésére.