Terrain 3 — Listes

9 drills · ~10 min · Chapitre lié : 3.4

1. Le trio de props minimal d’une FlatList ?

✅

data, renderItem (({ item }) => JSX), keyExtractor (identité stable — jamais l’index si la liste bouge).

2. Pourquoi .map() sur 500 items est-il mortel en RN et acceptable sur le web ?

✅

Chaque item devient de vrais widgets natifs créés/mesurés d’un coup (freeze, mémoire). Le DOM encaisse mieux — et FlatList virtualise : seul le visible existe.

3. Pull-to-refresh : les deux props ?

✅

refreshing={bool} + onRefresh={fn} (avec Query : isRefetching/refetch).

4. padding: 16 sur la liste : style ou contentContainerStyle ? Différence ?

✅

contentContainerStyle — le padding vit DANS le contenu scrollable (premier/dernier item espacés, scroll naturel). style pose le padding sur le cadre (contenu coupé aux bords).

5. Les 3 gestes anti-re-render d’une liste performante ?

✅

React.memo sur le composant d’item, useCallback sur les handlers passés aux items, styles statiques (pas d’objets/fonctions recréés dans renderItem).

6. Le header de stats doit scroller AVEC la liste. La prop ?

✅

ListHeaderComponent (et jamais une FlatList dans une ScrollView — virtualisation cassée).

7. État vide soigné : la prop, et pourquoi c’est important ?

✅

ListEmptyComponent — c’est le premier écran d’un nouvel utilisateur (et le moins testé à l’œil).

8. numColumns doit passer de 1 à 2 selon la largeur. Le piège ?

✅

numColumns ne change pas à chaud : il faut remonter la liste — key={columns}.

9. Quand envisager FlashList, et quel est le coût de migration ?

✅

Quand le profiler montre des saccades malgré les règles (très longues listes, feed hétérogène). API quasi identique : migration à ~5 lignes près.

👉 Terrain suivant : 4 — Expo Router