SectionList: Was ist das, Abschnittsstruktur und API in React Native

Was ist SectionList?

SectionList ist eine React Native-Komponente zur Anzeige von Daten, die in logische Abschnitte gruppiert sind. Jeder Abschnitt hat eine Überschrift und eine Liste von Elementen, ideal für Kontakte in alphabetischer Reihenfolge, Menüs nach Kategorie, Bestellungen nach Datum. Die Komponente basiert auf VirtualizedList und erbt alle Vorteile der Virtualisierung.

SectionList wurde zusammen mit FlatList in React Native 0.43 eingeführt und ist seitdem der Standard für kategorisierte Listen. Laut Meta (2026) verwenden 40% der React Native-Projekte SectionList zur Organisation strukturierter Daten. Im Gegensatz zur manuellen Gruppierung innerhalb von FlatList bietet SectionList integrierte Abschnittsunterstützung.

Hauptanwendungsfälle

SectionList wird in Kontaktlisten mit alphabetischem Index verwendet, wobei jeder Buchstabe ein separater Abschnitt ist. Im E-Commerce gruppiert die Komponente Produkte nach Kategorie oder Marke. In Notiz-Apps — nach Datum oder Tags. In Einstellungsbildschirmen — nach Abschnitten (Allgemein, Sicherheit, Benachrichtigungen).

Laut einer React Native-Nutzungsstudie (Meta, 2026) ist SectionList am effektivsten mit 5-50 Abschnitten mit jeweils 3-20 Elementen. Bei weniger Abschnitten ist es einfacher, FlatList mit Gruppierung über ListHeaderComponent zu verwenden. Bei mehr Abschnitten treten aufgrund der großen Anzahl von Überschriften Leistungsprobleme auf.

Datenstruktur und Abschnitte

SectionList Data akzeptiert ein Array von Section-Objekten, die jeweils einen title (Abschnittsüberschrift) und data (Array von Elementen) enthalten. Optional können key und renderItem für jeden Abschnitt separat übergeben werden, wodurch der gemeinsame renderItem überschrieben wird.

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

renderSectionHeader ist eine Funktion zum Rendern der Abschnittsüberschrift, die das Abschnittsobjekt erhält. renderItem ist die Element-Rendering-Funktion, ähnlich wie bei FlatList. Die Komponente unterstützt auch renderSectionFooter für den unteren Teil jedes Abschnitts.

<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 Header und Abschnittsnavigation

Sticky Header sind eine Schlüsselfunktion von SectionList. Wenn der Benutzer scrollt, bleibt die Überschrift des aktuellen Abschnitts am oberen Bildschirmrand haften, bis der Abschnitt vollständig durchgescrollt ist. Dies gibt dem Benutzer ständigen Kontext über die aktuelle Kategorie.

Der Sticky-Modus ist standardmäßig aktiviert. Zum Deaktivieren verwenden Sie stickySectionHeadersEnabled={false}. Unter iOS haften Überschriften mit nativer Animation, unter Android durch JS-Verarbeitung. Für alphabetische Verzeichnisse ist es praktisch, eine Seitenleiste mit Buchstaben für die schnelle Navigation hinzuzufügen.

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 ist eine Methode zur programmatischen Navigation zu jedem Abschnitt. Sie akzeptiert sectionIndex, itemIndex und viewPosition (0 — Anfang, 0.5 — Mitte, 1 — Ende). In Kombination mit einem seitlichen alphabetischen Index können Sie eine schnelle Navigation wie in den Standard-iOS-Kontakten implementieren.

SectionList Leistungsoptimierung

Die Optimierung von SectionList folgt denselben Prinzipien wie die Optimierung von FlatList, mit zusätzlichen Nuancen in Bezug auf Abschnitte. Jede Abschnittsüberschrift ist eine zusätzliche View, die beim Scrollen gerendert und neu gerendert wird. Bei 50+ Abschnitten können Überschriften das Scrollen verlangsamen.

Verwenden Sie React.memo für renderSectionHeader und renderItem, um unnötige Neurenderungen zu vermeiden. Wenn sich Abschnitte nicht dynamisch ändern, ziehen Sie useMemo für das Abschnittsarray in Betracht. Für sehr große Listen kombinieren Sie SectionList mit getItemLayout und geben feste Höhen für Überschriften und Elemente an.

SectionList vs FlatList: Wann was wählen

Die Wahl zwischen SectionList und FlatList hängt von der Datenstruktur ab. Wenn die Daten ein flaches Array sind — verwenden Sie FlatList. Wenn die Daten natürlich in Kategorien mit Überschriften gruppiert sind — verwenden Sie SectionList. Verwenden Sie SectionList nicht für einen einzelnen Abschnitt — FlatList erledigt dies effizienter.

Der Leistungsunterschied ist bei gleicher Anzahl von Elementen minimal. SectionList fügt Overhead für das Rendern von Überschriften hinzu, aber dieser Overhead ist gerechtfertigt, wenn Überschriften semantische Bedeutung haben. Wenn keine Überschriften benötigt werden — ist FlatList mit ListHeaderComponent zur Simulation von Abschnitten schneller.

Auswahlkriterien

Verwenden Sie SectionList, wenn: Daten standardmäßig gruppiert sind (Kontakte nach Buchstaben), sticky Header benötigt werden, Abschnittsüberschriften interaktive Elemente enthalten (Schaltflächen, Kontrollkästchen). Verwenden Sie FlatList, wenn: Daten flach sind, die Gruppierung sich dynamisch ändert, mehr als 50 Kategorien vorhanden sind und die Überschriften einheitlich sind.

SectionList Implementierungsbeispiele

SectionList mit einem alphabetischen Index ist ein klassischer Anwendungsfall. Die Implementierung umfasst eine Seitenleiste mit Buchstaben und scrollToLocation zum Springen zu einem Abschnitt. Nachfolgend eine vollständige Implementierung einer Kontaktliste mit alphabetischer Navigation.

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

Wichtig: Beim dynamischen Filtern von Abschnitten verwenden Sie useMemo, um das Array zu stabilisieren. Ohne Memoisierung erstellt SectionList bei jeder Filteränderung alle Zellen neu, was zum Verlust der Scrollposition und des Zustands verschachtelter Komponenten führt.