Aller au contenu
Toutes les notes

Arrête d'installer FlashList par réflexe

Jérémy Magrin

Développeur React Native Freelance Senior · Expo · iOS & Android

in
C'est le choix safe, celui que personne te reproche en review Shopify derrière, des milliers d'apps en prod, tu coches la case et tu passes à autre chose Sauf que le meilleur composant de liste que j'ai utilisé vient d'un mec quasi tout seul Jay Meistrich, le gars derrière Legend State, croisé à App.js, adorable Il sort Legend List, et sur mes écrans elle bat FlashList là où ça compte Le pourquoi, Jay l'a bien expliqué en conf FlashList recycle ses vues, et sur des listes à items de tailles variables ce recyclage coûte cher et demande des réglages Legend List mesure la vraie taille de chaque item à la volée et déplace des conteneurs positionnés Résultat en prod chez moi, moins de CPU et moins de mémoire au scroll Et sur le web, la v3 change la donne - un moteur de virtualisation DOM-natif en React DOM, là où FlashList sur le web repose sur react-native-web sans vrai maintien - le maintien de la position de scroll est branché par défaut, fini l'écran qui saute quand une image charge en haut - drop-in de FlatList et FlashList, tu changes l'import et tu testes Je tourne dessus depuis plusieurs mois, zéro envie de revenir en arrière On installe la lib de la grosse boîte pour être tranquille, et on rate la meilleure parce qu'elle vient d'un “inconnu” Tu fais confiance au badge Shopify ou au meilleur code, toi

Lire sur LinkedIn Voir la mission Odisei Music

En un coup d'œil

Ce que la note compare : FlashList face à Legend List v3.
CritèreFlashListLegend List
VirtualisationRecycle ses vuesMesure la taille réelle de chaque item et déplace des conteneurs positionnés
Items de taille variableLe recyclage coûte cher et demande des réglagesMesure à la volée, sans réglage
Consommation au scrollRéférenceMoins de CPU et moins de mémoire, mesuré en production
WebRepose sur react-native-web, sans vrai maintienMoteur de virtualisation DOM natif en React DOM depuis la v3
Position de scrollRéférenceMaintenue par défaut quand un item change de taille
Ajout d'items en hautRéférenceEn opt-in, à activer explicitement pour un chat ou un feed
MigrationRéférenceDrop-in de FlatList et FlashList, il suffit de changer l'import

Questions fréquentes

Legend List remplace-t-elle FlashList sans rien réécrire ?

Oui, la lib est un drop-in de FlatList et de FlashList : vous changez l'import et vous testez. Ce qui compte ensuite, c'est de mesurer sur vos propres écrans plutôt que de faire confiance au nom de la société derrière.

Pourquoi Legend List consomme-t-elle moins que FlashList ?

FlashList recycle ses vues, et sur des listes à items de tailles variables ce recyclage coûte cher et demande des réglages. Legend List mesure la vraie taille de chaque item à la volée et déplace des conteneurs positionnés. En production, cela donne moins de CPU et moins de mémoire au scroll.

Le maintien de la position de scroll fonctionne-t-il pour un chat ?

Par défaut, la lib stabilise la position quand un item change de taille. Le maintien lors de l'ajout d'items en haut, le cas du chat ou du feed, reste en opt-in et doit être activé explicitement. La documentation de migration détaille ce point.

Qu'apporte la v3 sur le web ?

Un moteur de virtualisation DOM natif en React DOM, là où FlashList sur le web repose sur react-native-web sans vrai maintien. Le maintien de la position de scroll y est branché par défaut, ce qui évite l'écran qui saute quand une image charge en haut.

Pour aller plus loin

Qui écrit

J'aide startups et scale-ups à concevoir, construire et faire évoluer leurs applications mobiles iOS et Android. Je travaille au quotidien avec React Native, que je pratique depuis sa sortie en 2015, ainsi qu'avec Expo, React.js et TypeScript. J'interviens du MVP à la mise en production sur l'App Store et Google Play, jusqu'à l'optimisation fine des performances et la structuration des équipes techniques.

Expert React Native freelanceDéveloppeur Expo freelanceAudit de performance React Native

Parlons-en

Un projet en tête ?

Réponse garantie en moins d'une heure, et trente minutes d'audit offertes en visio.

M'écrireMaltLinkedIn

Emailcontact@magrin.fr

Téléphone+33 6 73 12 19 30

LocalisationParis, France · full remote