SectionList: ce este, structura secțiunilor și API în React Native

Ce este SectionList?

SectionList — componentă React Native pentru afișarea datelor grupate în secțiuni logice. Fiecare secțiune are un titlu și o listă de elemente, ideală pentru contacte alfabetic, meniuri pe categorii, comenzi pe date. Componenta este construită pe VirtualizedList și moștenește toate avantajele virtualizării.

SectionList a apărut odată cu FlatList în React Native 0.43 și de atunci este standardul pentru liste categorisite. Conform datelor Meta (2026), 40% din proiectele React Native folosesc SectionList pentru organizarea datelor structurate. Spre deosebire de gruparea manuală în FlatList, SectionList oferă suport încorporat pentru secțiuni.

Scenarii principale de utilizare

SectionList este utilizat în liste de contacte cu indice alfabetic, unde fiecare literă este o secțiune separată. În e-commerce, componenta grupează produsele pe categorii sau mărci. În aplicațiile de notițe — pe date sau etichete. În setări — pe secțiuni (De bază, Securitate, Notificări).

Conform cercetării utilizării React Native (Meta, 2026), SectionList este cel mai eficient la 5–50 de secțiuni cu 3–20 de elemente fiecare. La un număr mai mic de secțiuni, este mai simplu să folosiți FlatList cu grupare prin ListHeaderComponent. La un număr mai mare — apar probleme de performanță din cauza numărului mare de titluri.

Structura datelor și secțiunile

SectionList Data primește un tablou de obiecte Section, fiecare conținând title (titlul secțiunii) și data (tablou de elemente). În plus, se pot transmite key și renderItem pentru fiecare secțiune separat, suprascriind renderItem-ul general.

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

renderSectionHeader — funcția de randare a titlului secțiunii, care primește obiectul secțiunii. renderItem — funcția de randare a elementului, analogă cu FlatList. Componenta acceptă de asemenea renderSectionFooter pentru partea inferioară a fiecărei secțiuni.

<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 și navigarea între secțiuni

Sticky headers — caracteristica cheie a SectionList. Când utilizatorul derulează, titlul secțiunii curente se fixează la marginea superioară a ecranului până când secțiunea este derulată complet. Aceasta oferă utilizatorului un context constant despre categoria curentă.

Modul sticky este activat implicit. Pentru dezactivare, utilizați stickySectionHeadersEnabled={false}. Pe iOS, titlurile se fixează cu animație nativă, pe Android — prin JS. Pentru ghiduri alfabetice, este convenabil să adăugați un panou lateral cu litere pentru navigare rapidă.

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ă pentru navigarea programatică la orice secțiune. Acceptă sectionIndex, itemIndex și viewPosition (0 — început, 0.5 — centru, 1 — sfârșit). Combinând cu indicele alfabetic lateral, se poate implementa navigarea rapidă ca în contactele standard iOS.

Optimizarea performanței SectionList

Optimizarea SectionList urmează aceleași principii ca optimizarea FlatList, cu nuanțe suplimentare legate de secțiuni. Fiecare titlu de secțiune este un View suplimentar care se randeează și se re-randeează în timpul derulării. La 50+ secțiuni, titlurile pot încetini derularea.

Utilizați React.memo pentru renderSectionHeader și renderItem pentru a evita re-randările inutile. Dacă secțiunile nu se schimbă dinamic, luați în considerare useMemo pentru tabloul sections. Pentru liste foarte mari, combinați SectionList cu getItemLayout, specificând înălțimea fixă a titlurilor și elementelor.

SectionList vs FlatList: când să alegeți ce

Alegerea între SectionList și FlatList depinde de structura datelor. Dacă datele sunt un tablou plat — utilizați FlatList. Dacă datele se grupează natural în categorii cu titluri — SectionList. Nu utilizați SectionList pentru o singură secțiune — FlatList va fi mai eficient.

Diferența de performanță este minimă la același număr de elemente. SectionList adaugă un overhead pentru randarea titlurilor, dar acest overhead este justificat când titlurile au încărcătură semantică. Dacă titlurile nu sunt necesare — FlatList cu ListHeaderComponent pentru simularea secțiunilor va fi mai rapid.

Criterii de selecție

Utilizați SectionList când: datele sunt grupate implicit (contacte pe litere), sunt necesare sticky headers, titlurile secțiunilor conțin elemente interactive (butoane, checkboxuri). Utilizați FlatList când: datele sunt plate, gruparea se schimbă dinamic, numărul de categorii depășește 50 și titlurile sunt uniforme.

Exemple de implementare SectionList

SectionList cu indice alfabetic — exemplu clasic de utilizare. Implementarea include un panou lateral cu litere și scrollToLocation pentru saltul la secțiune. Mai jos este implementarea completă a unei liste de contacte cu navigare alfabetică.

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

Important: la filtrarea dinamică a secțiunilor, utilizați useMemo pentru stabilizarea tabloului. Fără memoizare, SectionList va recrea toate celulele la fiecare modificare a filtrului, ceea ce duce la pierderea derulării și a stării componentelor încuibate.