FlatList : qu'est-ce que c'est, API et optimisation dans React Native

Qu'est-ce que FlatList ?

FlatList est un composant React Native qui implémente une liste virtualisée avec un rendu haute performance pour de grands ensembles de données. Le composant est construit sur VirtualizedList et fournit une API déclarative pour créer des listes plates de toute complexité.

FlatList a été introduit dans React Native 0.43 en remplacement de l'ancien ListView. Selon Meta (2026), FlatList est utilisé dans 85 % des applications React Native qui travaillent avec des listes. Le composant prend en charge tous les scénarios courants : contacts, fils d'actualité, catalogues produits et chats.

Histoire et place dans l'écosystème

Avant FlatList, les développeurs utilisaient ListView, qui nécessitait une configuration manuelle de la réutilisation des cellules. FlatList a automatisé ce processus en implémentant un rendu par fenêtrage similaire à RecyclerView sous Android (2014) et UICollectionView sous iOS (2012). Dans les projets modernes, FlatList est le standard de facto pour toute liste.

Comment fonctionne la virtualisation de FlatList

La virtualisation de FlatList est un mécanisme où le composant rend uniquement les éléments qui se trouvent dans la zone visible de l'écran, plus un petit tampon de chaque côté. Les éléments restants ne sont pas créés dans le DOM, ce qui économise la mémoire et accélère le rendu.

Lors du défilement, FlatList réutilise les cellules View déjà créées en remplaçant leurs données. Cela évite de créer des milliers de Views pour une liste de 10 000 éléments. La taille de tampon par défaut est de 10 éléments au-dessus et en dessous de la zone visible, mais elle est configurable via windowSize.

La configuration optimale de ces paramètres permet d'équilibrer la fluidité du défilement et la consommation mémoire. Pour les listes avec de grands éléments, il est recommandé de réduire windowSize à 5-7.

API et principales props de FlatList

L'API de FlatList inclut un ensemble de props pour configurer l'affichage et le comportement de la liste. Les deux props obligatoires sont data (tableau de données) et renderItem (fonction de rendu des éléments). keyExtractor améliore les performances en fournissant une clé unique pour chaque élément.

import React from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

const App = () => {
  const data = Array.from({ length: 100 }, (_, i) => ({
    id: i.toString(),
    title: `Item #${i + 1}`,
  }));

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.title}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
};

ItemSeparatorComponent ajoute un séparateur entre les éléments, ListHeaderComponent et ListFooterComponent ajoutent un en-tête et un pied de page à la liste. Cela permet de créer des mises en page complexes sans wrapper supplémentaire.

const styles = StyleSheet.create({
  item: {
    padding: 16,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  separator: {
    height: 1,
    backgroundColor: '#ccc',
  },
});

Optimisation des performances de FlatList

L'optimisation de FlatList est cruciale pour les applications avec des centaines et des milliers d'éléments. Sans configuration appropriée, la liste peut ralentir lors du défilement, consommer une mémoire excessive et provoquer des plantages sur les appareils de faible puissance.

La première règle est d'utiliser keyExtractor avec des identifiants uniques et stables. Utiliser des indices comme clés entraîne une réutilisation incorrecte des cellules et des bugs d'état. La deuxième règle est d'envelopper renderItem dans useCallback et d'utiliser React.memo pour le composant d'élément.

getItemLayout pour une hauteur fixe

Si tous les éléments ont la même hauteur, getItemLayout permet à FlatList de calculer la position de défilement sans mesurer les composants. Cela offre un gain de performances significatif, surtout lors du défilement vers un index spécifique.

const ITEM_HEIGHT = 80;

const getItemLayout = (data, index) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

<FlatList
  data={data}
  getItemLayout={getItemLayout}
  renderItem={renderItem}
/FlatList>

useMemo pour les données évite les rendus inutiles. Si les données proviennent d'une API, transformez-les une fois et mettez-les en cache. Utilisez React.memo pour le composant d'élément afin d'éviter le rendu d'éléments inchangés.

Listes horizontales et carrousels

FlatList horizontal se crée en ajoutant la prop horizontal={true}. La liste change la direction de défilement sur l'axe X, ce qui est pratique pour les carrousels de produits, les galeries d'images et les menus horizontaux.

En mode horizontal, il est important de configurer correctement snapToInterval et snapToAlignment pour un défilement pas à pas comme dans les carrousels natifs. Le composant gère automatiquement l'élan et le relâchement du doigt, s'arrêtant sur l'élément le plus proche.

<FlatList
  horizontal
  data={images}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  showsHorizontalScrollIndicator={false}
  snapToInterval={CARD_WIDTH + GAP}
  snapToAlignment="start"
  decelerationRate="fast"
  pagingEnabled
  onViewableItemsChanged={onViewableItemsChanged}
/>

onViewableItemsChanged est un callback déclenché lorsque les éléments visibles changent. Il est utilisé pour les analyses, le chargement différé des images et l'activation des vidéos uniquement pour les cartes visibles.

Pull-to-refresh et chargement infini

Le pull-to-refresh dans FlatList est implémenté via les props refreshing et onRefresh, fonctionnant de pair avec un état de chargement. En tirant la liste vers le bas, onRefresh est appelé, et le drapeau refreshing bloque les appels répétés.

Le chargement infini se configure via onEndReached — un callback déclenché à l'approche de la fin de la liste. onEndReachedThreshold détermine combien d'éléments avant la fin l'événement se déclenche. La pagination basée sur curseur est généralement utilisée.

const ListWithPagination = () => {
  const [data, setData] = React.useState([]);
  const [page, setPage] = React.useState(1);
  const [refreshing, setRefreshing] = React.useState(false);

  const loadMore = React.useCallback(async () => {
    const newData = await fetchPage(page);
    setData(prev => [...prev, ...newData]);
    setPage(p => p + 1);
  }, [page]);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      refreshing={refreshing}
      onRefresh={loadMore}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
    />
  );
};

Important : onEndReached peut être appelé plusieurs fois. Ajoutez un drapeau isLoading pour bloquer les requêtes répétées jusqu'à ce que la précédente soit terminée. Utilisez ActivityIndicator dans ListFooterComponent pour indiquer le chargement.