Comment rendre des listes avec FlatList ?

Question

Accepted Answer

**FlatList** est le composant React Native pour afficher efficacement des **listes scrollables** de données. Il rend les éléments **paresseusement** (seulement ce qui est visible), ce qui le rend performant pour les longues listes — bien mieux que de mapper les données dans une ScrollView. ## FlatList — listes efficaces ```jsx import { FlatList, Text, View } from 'react-native'; function UserList({ users }) { return ( item.id} // unique key per item (important!) renderItem={({ item }) => ( // how to render each item {item.name} )} /> ); } ``` FlatList prend le tableau **data**, une fonction **renderItem** (rendant chaque élément), et un **keyExtractor** (clés uniques) — et rend les éléments efficacement. ## Pourquoi FlatList (et pas ScrollView + map) ```text ❌ ScrollView with data.map(...) → renders ALL items at once (even off-screen) → slow/memory-heavy for long lists ✅ FlatList → renders only VISIBLE items lazily (virtualization); recycles as you scroll → performant for long/large lists → Use FlatList for any non-trivial list; ScrollView only for small, fixed content. ``` ## Fonctionnalités utiles de FlatList ```text ✓ onEndReached → load more data when scrolling near the end (INFINITE SCROLL / pagination) ✓ refreshing / onRefresh → PULL-TO-REFRESH ✓ ListHeaderComponent / ListFooterComponent / ItemSeparatorComponent ✓ numColumns → grid layout; horizontal → horizontal list ✓ SectionList → for sectioned/grouped lists ``` ## Pourquoi c'est important Comprendre FlatList est essentiel car **afficher des listes de données est un besoin quasi universel** dans les applications, et FlatList est la façon standard et performante de le faire en React Native, donc c'est une connaissance incontournable. Preque chaque application affiche des listes (fils d'actualité, messages, résultats de recherche), et le faire efficacement est important. L'insight clé est que **FlatList rend les éléments paresseusement** (seulement ce qui est visible, via virtualisation, recyclage au défilement) — ce qui le rend performant pour les longues listes, contrairement à l'erreur courante d'utiliser une **ScrollView avec `data.map()`** qui rend tous les éléments à la fois (même hors écran), causant des ralentissements et des problèmes mémoire pour les longues listes. Comprendre d'**utiliser FlatList pour toute liste non triviale** (et ScrollView seulement pour petit contenu fixe) est une connaissance pratique importante qui prévient des problèmes de performance réels. Comprendre l'utilisation basique (le tableau `data`, la fonction `renderItem`, et `keyExtractor` pour les clés uniques) est nécessaire pour rendre les listes. Comprendre les **fonctionnalités utiles** — `onEndReached` (pour le scroll infini/pagination, charger plus de données près de la fin — un besoin très courant), pull-to-refresh, composants header/footer/separator, mise en page grille et horizontale, et SectionList pour les listes groupées — couvre les exigences courantes de listes que les applications ont. Puisque afficher les listes efficacement est un besoin quasi universel des applications et FlatList (avec son rendu paresseux/virtualisation) est la solution React Native standard et performante — bien mieux que l'approche naïve ScrollView+map — comprendre FlatList est une connaissance React Native essentielle et fréquemment appliquée — un composant core utilisé dans presque chaque application pour afficher des listes de données, où comprendre son rendu paresseux efficace et ses fonctionnalités (comme le scroll infini et le pull-to-refresh) est fondamental pour construire des listes performantes et fonctionnelles, une compétence standard pour le développement React Native.