Dans une vraie app
Le recyclage change une habitude : un composant de cellule reçoit de nouvelles props au lieu d’être recréé, donc tout état local (useState d’un toggle, d’une position de scroll interne) survit au changement d’élément. useRecyclingState existe pour ça, et un key dérivé de l’élément sur un sous-composant est le réflexe à abandonner, puisqu’il annule le bénéfice. Les cellules doivent aussi avoir un type stable : getItemType permet de séparer les pools de recyclage quand une liste mélange plusieurs layouts.
Sur Expo, l’installation ne demande pas de config plugin, et FlashList fonctionne dans Expo Go. Le piège de migration depuis FlatList est la prop estimatedItemSize laissée dans le code (sans effet en v2) et les onLayout par cellule utilisés pour un calcul de position, que le recyclage rend trompeurs. Pour un ajout massif d’éléments en haut de liste (chargement de messages anciens), drawDistance se règle plus haut.
Ce que je mesure avant de recommander un changement : le temps de rendu d’une cellule dans le React Profiler (une cellule lourde reste lente, recyclée ou non), le nombre de rendus par scroll avec « Highlight updates », et la présence de zones blanches en release sur un device milieu de gamme Android. FlashList ne compense pas un renderItem qui fait des calculs ou des require d’images à chaque rendu.
Termes liés
New Architecture
La réécriture du cœur de React Native (Fabric, Turbo Modules, JSI), activée par défaut depuis la 0.76 et seule architecture depuis la 0.82.
Fabric
Le renderer de la New Architecture : un cœur C++ partagé entre iOS et Android qui calcule le layout de façon synchrone.
Reanimated
La librairie d’animation de Software Mansion qui exécute les animations sur le thread UI via des worklets, sans attendre le thread JavaScript.
Cold start (temps de démarrage)
Le lancement de l’app depuis zéro, processus compris : natif, chargement du bundle, premier rendu React, jusqu’à l’écran utilisable (TTI).