SectionList : qu'est-ce que c'est, structure des sections et API dans React Native

Qu'est-ce que SectionList ?

SectionList est un composant React Native pour afficher des données regroupées en sections logiques. Chaque section a un en-tête et une liste d'éléments, idéal pour les contacts par ordre alphabétique, les menus par catégorie, les commandes par date. Le composant est construit sur VirtualizedList et hérite de tous les avantages de la virtualisation.

SectionList a été introduit avec FlatList dans React Native 0.43 et est depuis devenu la norme pour les listes catégorisées. Selon Meta (2026), 40% des projets React Native utilisent SectionList pour organiser des données structurées. Contrairement au regroupement manuel dans FlatList, SectionList offre une prise en charge intégrée des sections.

Principaux cas d'utilisation

SectionList est utilisé dans les listes de contacts avec index alphabétique, où chaque lettre est une section distincte. Dans le e-commerce, le composant regroupe les produits par catégorie ou marque. Dans les applications de notes — par date ou tags. Dans les écrans de paramètres — par sections (Général, Sécurité, Notifications).

Selon une étude d'utilisation de React Native (Meta, 2026), SectionList est le plus efficace avec 5 à 50 sections contenant 3 à 20 éléments chacune. Avec moins de sections, il est plus simple d'utiliser FlatList avec un regroupement via ListHeaderComponent. Avec plus de sections, des problèmes de performance surviennent en raison du grand nombre d'en-têtes.

Structure des données et sections

SectionList Data accepte un tableau d'objets Section, chacun contenant un title (en-tête de section) et un tableau data (éléments). Optionnellement, vous pouvez passer key et renderItem pour chaque section séparément, en remplaçant le renderItem commun.

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

renderSectionHeader est une fonction pour rendre l'en-tête de section, recevant l'objet section. renderItem est la fonction de rendu des éléments, similaire à FlatList. Le composant prend également en charge renderSectionFooter pour le bas de chaque section.

<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 et navigation par sections

Les sticky headers sont une fonctionnalité clé de SectionList. Lorsque l'utilisateur fait défiler, l'en-tête de la section courante se fixe en haut de l'écran jusqu'à ce que la section soit entièrement parcourue. Cela donne à l'utilisateur un contexte constant sur la catégorie actuelle.

Le mode sticky est activé par défaut. Pour le désactiver, utilisez stickySectionHeadersEnabled={false}. Sur iOS, les en-têtes se fixent avec une animation native ; sur Android, via un traitement JS. Pour les répertoires alphabétiques, il est pratique d'ajouter un panneau latéral avec des lettres pour une navigation rapide.

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 est une méthode de navigation programmatique vers n'importe quelle section. Elle accepte sectionIndex, itemIndex et viewPosition (0 — début, 0.5 — centre, 1 — fin). Combiné avec un index alphabétique latéral, vous pouvez implémenter une navigation rapide comme dans les contacts standard d'iOS.

Optimisation des performances de SectionList

L'optimisation de SectionList suit les mêmes principes que l'optimisation de FlatList, avec des nuances supplémentaires liées aux sections. Chaque en-tête de section est une View supplémentaire qui se rend et se re-rend lors du défilement. Avec 50+ sections, les en-têtes peuvent ralentir le défilement.

Utilisez React.memo pour renderSectionHeader et renderItem afin d'éviter des re-rendus inutiles. Si les sections ne changent pas dynamiquement, envisagez useMemo pour le tableau de sections. Pour les très grandes listes, combinez SectionList avec getItemLayout, en spécifiant des hauteurs fixes pour les en-têtes et les éléments.

SectionList vs FlatList : quand choisir quoi

Le choix entre SectionList et FlatList dépend de la structure des données. Si les données sont un tableau plat — utilisez FlatList. Si les données se regroupent naturellement en catégories avec des en-têtes — utilisez SectionList. N'utilisez pas SectionList pour une seule section — FlatList le gérera plus efficacement.

La différence de performance est minime avec le même nombre d'éléments. SectionList ajoute une surcharge pour le rendu des en-têtes, mais cette surcharge est justifiée lorsque les en-têtes ont une charge sémantique. Si les en-têtes ne sont pas nécessaires — FlatList avec ListHeaderComponent pour simuler des sections sera plus rapide.

Critères de sélection

Utilisez SectionList lorsque : les données sont regroupées par défaut (contacts par lettre), les sticky headers sont nécessaires, les en-têtes de section contiennent des éléments interactifs (boutons, cases à cocher). Utilisez FlatList lorsque : les données sont plates, le regroupement change dynamiquement, il y a plus de 50 catégories et les en-têtes sont uniformes.

Exemples d'implémentation de SectionList

SectionList avec un index alphabétique est un cas d'utilisation classique. L'implémentation inclut un panneau latéral avec des lettres et scrollToLocation pour sauter vers une section. Voici une implémentation complète d'une liste de contacts avec navigation alphabétique.

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 : lors du filtrage dynamique des sections, utilisez useMemo pour stabiliser le tableau. Sans mémoïsation, SectionList recréera toutes les cellules à chaque changement de filtre, entraînant une perte de la position de défilement et de l'état des composants imbriqués.