SectionList: wat is het, sectiestructuur en API in React Native

Wat is SectionList?

SectionList — React Native-component voor het weergeven van gegevens gegroepeerd in logische secties. Elke sectie heeft een kop en een lijst met elementen, ideaal voor contacten op alfabet, menu’s per categorie, bestellingen per datum. De component is gebouwd op VirtualizedList en erft alle voordelen van virtualisatie.

SectionList verscheen samen met FlatList in React Native 0.43 en is sindsdien de standaard voor gecategoriseerde lijsten. Volgens gegevens van Meta (2026) gebruikt 40% van de React Native-projecten SectionList voor gestructureerde gegevensorganisatie. In tegenstelling tot handmatige groepering binnen FlatList, biedt SectionList ingebouwde ondersteuning voor secties.

Belangrijkste gebruiksscenario’s

SectionList wordt gebruikt in contactlijsten met een alfabetische index, waar elke letter een aparte sectie is. In e-commerce groepeert de component producten op categorie of merk. In notitie-apps — op datum of tags. In instellingen — op secties (Basis, Beveiliging, Meldingen).

Volgens onderzoek naar React Native-gebruik (Meta, 2026) is SectionList het meest effectief bij 5–50 secties met 3–20 elementen per sectie. Bij minder secties is het eenvoudiger om FlatList met groepering via ListHeaderComponent te gebruiken. Bij meer secties — ontstaan prestatieproblemen door het grote aantal koppen.

Gegevensstructuur en secties

SectionList Data accepteert een array van Section-objecten, elk met een title (sectiekop) en data (array van elementen). Daarnaast kunnen key en renderItem voor elke sectie afzonderlijk worden doorgegeven, ter overschrijving van de algemene renderItem.

const sections = [
  {
    title: 'React Native',
    data: ['FlatList', 'SectionList', 'VirtualizedList'],
  },
  {
    title: 'React',
    data: ['Hooks', 'Context', 'Suspense'],
  },
  {
    title: 'Android',
    data: ['Activity', 'Fragment', 'ViewModel'],
  },
];

renderSectionHeader — de renderfunctie voor de sectiekop, die het sectieobject ontvangt. renderItem — de renderfunctie voor het element, analoog aan FlatList. De component ondersteunt ook renderSectionFooter voor het onderste gedeelte van elke sectie.

<SectionList
  sections={sections}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => (
    <View style={styles.item}>
      <Text>{item}</Text>
    </View>
  )}
  renderSectionHeader={({ section }) => (
    <View style={styles.sectionHeader}>
      <Text style={styles.sectionTitle}>{section.title}</Text>
    </View>
  )}
/>

Sticky headers en navigatie door secties

Sticky headers — de belangrijkste functie van SectionList. Wanneer de gebruiker scrolt, blijft de kop van de huidige sectie plakken aan de bovenrand van het scherm totdat de sectie volledig is gescrolld. Dit geeft de gebruiker een constante context over de huidige categorie.

De sticky-modus is standaard ingeschakeld. Gebruik stickySectionHeadersEnabled={false} om uit te schakelen. Op iOS plakken koppen met native animatie, op Android — via JS. Voor alfabetische naslagwerken is het handig om een zijpaneel met letters toe te voegen voor snelle navigatie.

const ContactsList = () => {
  const sectionListRef = React.useRef(null);

  const scrollToSection = (index) => {
    sectionListRef.current?.scrollToLocation({
      sectionIndex: index,
      itemIndex: 0,
      viewPosition: 0,
    });
  };

  return (
    <View>
      <SectionList
        ref={sectionListRef}
        sections={sections}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        renderSectionHeader={renderSectionHeader}
        onViewableItemsChanged={onViewableItemsChanged}
      />
    </View>
  );
};

scrollToLocation — methode voor programmatische navigatie naar elke sectie. Accepteert sectionIndex, itemIndex en viewPosition (0 — begin, 0.5 — midden, 1 — einde). In combinatie met een alfabetische zij-index kan snelle navigatie worden geïmplementeerd zoals in standaard iOS-contacten.

Prestatieoptimalisatie van SectionList

Optimalisatie van SectionList volgt dezelfde principes als optimalisatie van FlatList, met extra nuances met betrekking tot secties. Elke sectiekop is een extra View die wordt gerenderd en opnieuw gerenderd tijdens het scrollen. Bij 50+ secties kunnen koppen het scrollen vertragen.

Gebruik React.memo voor renderSectionHeader en renderItem om onnodige herrenderingen te voorkomen. Als secties niet dynamisch veranderen, overweeg dan useMemo voor de sections-array. Voor zeer grote lijsten combineer SectionList met getItemLayout door vaste hoogte van koppen en elementen op te geven.

SectionList vs FlatList: wanneer wat te kiezen

De keuze tussen SectionList en FlatList hangt af van de gegevensstructuur. Als de gegevens een platte array zijn — gebruik FlatList. Als gegevens van nature groeperen in categorieën met koppen — SectionList. Gebruik SectionList niet voor één sectie — FlatList is efficiënter.

Het prestatieverschil is minimaal bij hetzelfde aantal elementen. SectionList voegt overhead toe voor het renderen van koppen, maar deze overhead is gerechtvaardigd wanneer koppen betekenisvol zijn. Als koppen niet nodig zijn — FlatList met ListHeaderComponent voor simulatie van secties is sneller.

Selectiecriteria

Gebruik SectionList wanneer: gegevens standaard zijn gegroepeerd (contacten per letter), sticky headers nodig zijn, sectiekoppen interactieve elementen bevatten (knoppen, checkboxen). Gebruik FlatList wanneer: gegevens plat zijn, groepering dynamisch verandert, het aantal categorieën meer dan 50 is en koppen uniform zijn.

Voorbeelden van SectionList-implementatie

SectionList met een alfabetische index — een klassiek gebruiksvoorbeeld. De implementatie omvat een zijpaneel met letters en scrollToLocation om naar een sectie te springen. Hieronder vindt u de volledige implementatie van een contactlijst met alfabetische navigatie.

const ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

const AlphabetContacts = () => {
  const ref = React.useRef(null);

  const sections = React.useMemo(() =>
    ALPHABET.map(letter => ({
      title: letter,
      data: contacts.filter(c => c.name.startsWith(letter)),
    })).filter(s => s.data.length > 0),
  []);

  return (
    <View style={styles.container}>
      <SectionList
        ref={ref}
        sections={sections}
        keyExtractor={item => item.id}
        renderItem={renderContact}
        renderSectionHeader={renderHeader}
        getItemLayout={getItemLayout}
      />
      <View style={styles.sidebar}>
        {ALPHABET.map(letter => (
          <Text
            key={letter}
            onPress={() => scrollToSection(letter)}
          >{letter}</Text>
        ))}
      </View>
    </View>
  );
};

Belangrijk: gebruik useMemo bij dynamisch filteren van secties om de array te stabiliseren. Zonder memoizatie zal SectionList bij elke filterwijziging alle cellen opnieuw aanmaken, wat leidt tot verlies van scrollpositie en status van geneste componenten.