SectionList: cos'è, struttura delle sezioni e API in React Native

Cos'è SectionList?

SectionList è un componente React Native per visualizzare dati raggruppati in sezioni logiche. Ogni sezione ha un'intestazione e un elenco di elementi, ideale per contatti in ordine alfabetico, menu per categoria, ordini per data. Il componente è costruito su VirtualizedList ed eredita tutti i vantaggi della virtualizzazione.

SectionList è stato introdotto insieme a FlatList in React Native 0.43 e da allora è diventato lo standard per le liste categorizzate. Secondo Meta (2026), il 40% dei progetti React Native utilizza SectionList per organizzare dati strutturati. A differenza del raggruppamento manuale all'interno di FlatList, SectionList fornisce supporto integrato per le sezioni.

Casi d'uso principali

SectionList viene utilizzato nelle rubriche con indice alfabetico, dove ogni lettera è una sezione separata. Nell'e-commerce, il componente raggruppa i prodotti per categoria o marca. Nelle app per prendere appunti — per data o tag. Nelle schermate delle impostazioni — per sezioni (Generale, Sicurezza, Notifiche).

Secondo uno studio sull'uso di React Native (Meta, 2026), SectionList è più efficace con 5-50 sezioni contenenti 3-20 elementi ciascuna. Con meno sezioni, è più semplice usare FlatList con raggruppamento tramite ListHeaderComponent. Con più sezioni, sorgono problemi di prestazioni a causa del grande numero di intestazioni.

Struttura dati e sezioni

SectionList Data accetta un array di oggetti Section, ciascuno contenente un title (intestazione della sezione) e un array data (elementi). Opzionalmente, è possibile passare key e renderItem per ogni sezione separatamente, sovrascrivendo il renderItem comune.

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

renderSectionHeader è una funzione per il rendering dell'intestazione della sezione, che riceve l'oggetto sezione. renderItem è la funzione di rendering degli elementi, simile a FlatList. Il componente supporta anche renderSectionFooter per la parte inferiore di ogni sezione.

<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 e navigazione per sezioni

Gli sticky headers sono una caratteristica fondamentale di SectionList. Quando l'utente scorre, l'intestazione della sezione corrente si fissa nella parte superiore dello schermo finché la sezione non viene completamente scrollata. Questo fornisce all'utente un contesto costante sulla categoria corrente.

La modalità sticky è attivata per impostazione predefinita. Per disattivarla, utilizzare stickySectionHeadersEnabled={false}. Su iOS, le intestazioni si fissano con animazione nativa; su Android, tramite elaborazione JS. Per i rubriche alfabetiche, è conveniente aggiungere un pannello laterale con lettere per una navigazione rapida.

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 è un metodo per la navigazione programmatica a qualsiasi sezione. Accetta sectionIndex, itemIndex e viewPosition (0 — inizio, 0.5 — centro, 1 — fine). Combinato con un indice alfabetico laterale, è possibile implementare una navigazione rapida come nei contatti standard di iOS.

Ottimizzazione delle prestazioni di SectionList

L'ottimizzazione di SectionList segue gli stessi principi dell'ottimizzazione di FlatList, con sfumature aggiuntive relative alle sezioni. Ogni intestazione di sezione è una View aggiuntiva che viene renderizzata e ri-renderizzata durante lo scorrimento. Con 50+ sezioni, le intestazioni possono rallentare lo scorrimento.

Utilizzare React.memo per renderSectionHeader e renderItem per evitare re-render non necessari. Se le sezioni non cambiano dinamicamente, considerare useMemo per l'array delle sezioni. Per liste molto grandi, combinare SectionList con getItemLayout, specificando altezze fisse per intestazioni ed elementi.

SectionList vs FlatList: quando scegliere cosa

La scelta tra SectionList e FlatList dipende dalla struttura dei dati. Se i dati sono un array piatto — utilizzare FlatList. Se i dati si raggruppano naturalmente in categorie con intestazioni — utilizzare SectionList. Non utilizzare SectionList per una singola sezione — FlatList lo gestirà in modo più efficiente.

La differenza di prestazioni è minima con lo stesso numero di elementi. SectionList aggiunge overhead per il rendering delle intestazioni, ma questo overhead è giustificato quando le intestazioni hanno un significato semantico. Se le intestazioni non sono necessarie — FlatList con ListHeaderComponent per simulare le sezioni sarà più veloce.

Criteri di selezione

Utilizzare SectionList quando: i dati sono raggruppati per impostazione predefinita (contatti per lettera), sono necessari sticky headers, le intestazioni delle sezioni contengono elementi interattivi (pulsanti, caselle di controllo). Utilizzare FlatList quando: i dati sono piatti, il raggruppamento cambia dinamicamente, ci sono più di 50 categorie e le intestazioni sono uniformi.

Esempi di implementazione di SectionList

SectionList con indice alfabetico è un caso d'uso classico. L'implementazione include un pannello laterale con lettere e scrollToLocation per saltare a una sezione. Di seguito è riportata un'implementazione completa di una rubrica con navigazione alfabetica.

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

Importante: quando si filtrano dinamicamente le sezioni, utilizzare useMemo per stabilizzare l'array. Senza memoizzazione, SectionList ricreerà tutte le celle a ogni modifica del filtro, causando la perdita della posizione di scorrimento e dello stato dei componenti annidati.