SectionList: vad är det, sektionsstruktur och API i React Native

Vad är SectionList?

SectionList — React Native-komponent för att visa data grupperad i logiska sektioner. Varje sektion har en rubrik och en lista med element, idealisk för kontakter i alfabetisk ordning, menyer per kategori, beställningar per datum. Komponenten är byggd på VirtualizedList och ärver alla fördelar med virtualisering.

SectionList dök upp tillsammans med FlatList i React Native 0.43 och har sedan dess varit standarden för kategoriserade listor. Enligt Meta-data (2026) använder 40% av React Native-projekten SectionList för att organisera strukturerad data. Till skillnad från manuell gruppering i FlatList, erbjuder SectionList inbyggt stöd för sektioner.

Huvudsakliga användningsscenarier

SectionList används i kontaktlistor med alfabetiskt index, där varje bokstav är en separat sektion. Inom e-handel grupperar komponenten produkter efter kategori eller märke. I anteckningsappar — efter datum eller taggar. I inställningar — efter sektioner (Grundläggande, Säkerhet, Aviseringar).

Enligt forskning om React Native-användning (Meta, 2026) är SectionList mest effektiv vid 5–50 sektioner med 3–20 element per sektion. Vid färre sektioner är det enklare att använda FlatList med gruppering via ListHeaderComponent. Vid fler sektioner — uppstår prestandaproblem på grund av det stora antalet rubriker.

Datastruktur och sektioner

SectionList Data tar emot en array av Section-objekt, var och en innehåller title (sektionsrubrik) och data (array av element). Dessutom kan key och renderItem skickas för varje sektion separat, vilket åsidosätter den allmänna renderItem.

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

renderSectionHeader — renderingsfunktionen för sektionsrubriken som tar emot sektionsobjektet. renderItem — renderingsfunktionen för elementet, analog med FlatList. Komponenten stöder också renderSectionFooter för den nedre delen av varje sektion.

<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 och navigering mellan sektioner

Sticky headers — den viktigaste funktionen i SectionList. När användaren scrollar fastnar den aktuella sektionens rubrik vid skärmens övre kant tills sektionen har scrollats helt. Detta ger användaren ett konstant sammanhang om den aktuella kategorin.

Sticky-läget är aktiverat som standard. För att avaktivera, använd stickySectionHeadersEnabled={false}. På iOS fastnar rubriker med inbyggd animation, på Android — via JS. För alfabetiska uppslagsverk är det praktiskt att lägga till en sidopanel med bokstäver för snabb navigering.

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 — metod för programmerad navigering till valfri sektion. Accepterar sectionIndex, itemIndex och viewPosition (0 — början, 0.5 — mitten, 1 — slut). Genom att kombinera med ett alfabetiskt sidindex kan snabb navigering implementeras som i standard iOS-kontakter.

Prestandaoptimering av SectionList

Optimering av SectionList följer samma principer som optimering av FlatList, med ytterligare nyanser relaterade till sektioner. Varje sektionsrubrik är en extra View som renderas och omrenderas vid scrollning. Vid 50+ sektioner kan rubriker sakta ner scrollningen.

Använd React.memo för renderSectionHeader och renderItem för att undvika onödiga omrenderingar. Om sektioner inte ändras dynamiskt, överväg useMemo för sections-arrayen. För mycket stora listor, kombinera SectionList med getItemLayout och ange fast höjd för rubriker och element.

SectionList vs FlatList: när ska man välja vad

Valet mellan SectionList och FlatList beror på datastrukturen. Om data är en platt array — använd FlatList. Om data naturligt grupperas i kategorier med rubriker — SectionList. Använd inte SectionList för en enda sektion — FlatList är effektivare.

Prestandaskillnaden är minimal vid samma antal element. SectionList lägger till overhead för rendering av rubriker, men denna overhead är motiverad när rubriker bär mening. Om rubriker inte behövs — FlatList med ListHeaderComponent för simulering av sektioner blir snabbare.

Urvalskriterier

Använd SectionList när: data är grupperad som standard (kontakter per bokstav), sticky headers behövs, sektionsrubriker innehåller interaktiva element (knappar, kryssrutor). Använd FlatList när: data är platt, gruppering ändras dynamiskt, antalet kategorier överstiger 50 och rubriker är enhetliga.

Exempel på SectionList-implementering

SectionList med alfabetiskt index — klassiskt användningsexempel. Implementeringen inkluderar en sidopanel med bokstäver och scrollToLocation för att hoppa till en sektion. Nedan är den fullständiga implementeringen av en kontaktlista med alfabetisk navigering.

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

Viktigt: vid dynamisk filtrering av sektioner, använd useMemo för att stabilisera arrayen. Utan memoisering kommer SectionList att återskapa alla celler vid varje filterändring, vilket leder till förlust av scrollning och tillstånd för nästlade komponenter.