FlatList: wat is het, API en optimalisatie in React Native

Wat is FlatList?

FlatList — een React Native-component die een gevirtualiseerde lijst implementeert met performant renderen van grote hoeveelheden gegevens. De component is gebouwd op VirtualizedList en biedt een declaratieve API voor het maken van platte lijsten van elke complexiteit.

FlatList verscheen in React Native 0.43 als vervanging voor de verouderde ListView. Volgens Meta-gegevens (2026) wordt FlatList gebruikt in 85% van de React Native-applicaties die met lijsten werken. De component ondersteunt alle gangbare scenario's: contacten, nieuwsfeeds, productcatalogi, chats.

Geschiedenis en plaats in het ecosysteem

Vóór de komst van FlatList gebruikten ontwikkelaars ListView, dat handmatige configuratie van celhergebruik vereiste. FlatList automatiseerde dit proces door venstergebaseerd renderen te introduceren, vergelijkbaar met RecyclerView in Android (2014) en UICollectionView in iOS (2012). In moderne projecten is FlatList de facto standaard voor alle lijsten.

Hoe werkt FlatList-virtualisatie

FlatList-virtualisatie — het mechanisme waarbij de component alleen de elementen rendert die zich in het zichtbare gedeelte van het scherm bevinden, plus een kleine buffer aan elke kant. De overige elementen worden niet in de DOM aangemaakt, wat geheugen bespaart en het renderen versnelt.

Tijdens het scrollen hergebruikt FlatList reeds aangemaakte View-cellen door de gegevens erin te vervangen. Dit voorkomt het aanmaken van duizenden Views voor een lijst van 10.000 elementen. De standaard buffergrootte is 10 elementen boven en onder het zichtbare gebied, maar kan worden geconfigureerd via windowSize.

Optimale configuratie van deze parameters zorgt voor een balans tussen scrollvloeiendheid en geheugengebruik. Voor lijsten met grote elementen wordt aanbevolen windowSize te verkleinen naar 5-7.

FlatList API en belangrijkste props

FlatList API bevat een reeks props voor het configureren van de weergave en het gedrag van de lijst. Twee verplichte props — data (gegevensarray) en renderItem (renderfunctie voor elementen). keyExtractor verhoogt de prestaties door een unieke sleutel voor elk element te bieden.

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 voegt een scheidingsteken tussen elementen toe, ListHeaderComponent en ListFooterComponent — de kop- en voettekst van de lijst. Dit maakt het mogelijk complexe lay-outs te maken zonder extra omhulling.

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

FlatList-prestaties optimaliseren

FlatList-optimalisatie is cruciaal voor applicaties met honderden en duizenden elementen. Zonder correcte configuratie kan de lijst traag worden tijdens het scrollen, overmatig geheugen verbruiken en crashes veroorzaken op zwakkere apparaten.

Eerste regel — gebruik keyExtractor met unieke en stabiele identificatoren. Indexen als sleutels leiden tot onjuist celhergebruik en statusfouten. Tweede — omwikkel renderItem in useCallback en gebruik React.memo voor de component van het element.

getItemLayout voor vaste hoogte

Als alle elementen dezelfde hoogte hebben, stelt getItemLayout FlatList in staat de scrollpositie te berekenen zonder componenten te meten. Dit geeft een aanzienlijke prestatieverbetering, vooral bij scrollen naar een specifieke index.

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 voor gegevens voorkomt onnodige herrenderingen. Als gegevens van de API komen, transformeer ze dan eenmalig en cache ze. Gebruik React.memo voor de component van het element om rendering van ongewijzigde elementen te voorkomen.

Horizontale lijsten en carrousels

Horizontale FlatList wordt gemaakt door de prop horizontal={true} toe te voegen. De lijst verandert de scrollrichting naar de X-as, wat handig is voor productcarrousels, afbeeldingsgalerijen en horizontale menu's.

In de horizontale modus is het belangrijk snapToInterval en snapToAlignment correct te configureren voor stapsgewijs scrollen, zoals in native carrousels. De component verwerkt automatisch momentum en het loslaten van de vinger, stoppend bij het dichtstbijzijnde element.

<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 die wordt aangeroepen wanneer zichtbare elementen veranderen. Wordt gebruikt voor analyse, lazy loading van afbeeldingen en activatie van video alleen voor zichtbare kaarten.

Pull-to-refresh en oneindig laden

Pull-to-refresh in FlatList wordt geïmplementeerd via de props refreshing en onRefresh, die samenwerken met de laadstatus. Bij het naar beneden trekken van de lijst wordt onRefresh aangeroepen en de refreshing-vlag blokkeert herhaalde aanroepen.

Oneindig laden (infinite scroll) wordt geconfigureerd via onEndReached — een callback die wordt geactiveerd bij het naderen van het einde van de lijst. onEndReachedThreshold bepaalt hoeveel elementen voor het einde de gebeurtenis activeert. Voor paginering wordt meestal een cursor-based aanpak gebruikt.

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

Belangrijk: onEndReached kan meerdere keren worden aangeroepen. Voeg een isLoading-vlag toe om herhaalde verzoeken te blokkeren totdat het vorige is voltooid. Gebruik ActivityIndicator in ListFooterComponent om laden aan te geven.