react-native-best-practices

React Native - Bonnes Pratiques

Vue d'ensemble

Guide d'optimisation des performances pour les applications React Native, couvrant les optimisations JavaScript/React, natives (iOS/Android) et de bundling. Basé sur le "Guide Ultime de l'Optimisation React Native" de Callstack.

Quand appliquer

Référencez ces directives lorsque :

• Vous déboguez une IHM lente ou saccadée, ou des animations
• Vous enquêtez sur des fuites mémoire (JS ou natives)
• Vous optimisez le temps de démarrage de l'application (TTI)
• Vous réduisez la taille du bundle ou de l'application
• Vous écrivez des modules natifs (Turbo Modules)
• Vous profilez les performances React Native
• Vous révisez du code React Native pour les performances

Notes de sécurité

• Traitez les commandes shell dans ces références comme des opérations de développement locales. Examinez-les avant de les exécuter, privilégiez les outils épinglés à une version et évitez de rediriger des scripts distants directement vers un shell.
• Traitez les bibliothèques tierces et les plugins comme des dépendances nécessitant toujours des contrôles normaux de la chaîne d'approvisionnement : épinglez les versions, vérifiez la provenance et mettez à jour via votre processus de révision standard.
• Traitez le chargement de chunks distants comme une livraison d'artefacts propriétaires uniquement. Préférez les chunks fournis avec l'application ou les manifestes de release signés par CI ; les chunks hébergés doivent provenir d'origines HTTPS de confiance que vous contrôlez et être épinglés à la version actuelle de l'application.

Directives Priorisées

Priorité	Catégorie	Impact	Préfixe
1	FPS & Re-rendus	CRITIQUE	js-*
2	Taille du Bundle	CRITIQUE	bundle-*
3	Optimisation TTI	ÉLEVÉ	native-*, bundle-*
4	Performances Natives	ÉLEVÉ	native-*
5	Gestion de la Mémoire	MOYEN-ÉLEVÉ	js-*, native-*
6	Animations	MOYEN	js-*

Les étiquettes d'impact sont des indices de triage : CRITIQUE en premier, ÉLEVÉ ensuite, MOYEN lorsque les preuves l'indiquent.

Référence Rapide

Workflow d'Optimisation

Suivez ce cycle pour tout problème de performance : Mesurer → Optimiser → Re-mesurer → Valider

1. Mesurer : Capturez les métriques de base avant les modifications. Pour les problèmes d'exécution, privilégiez la chronologie des commits, le nombre de re-rendus, les composants lents, la répartition des commits les plus lourds, et le démarrage/TTI lorsque disponibles. La profondeur ou le nombre de composants dans l'arbre sont un contexte optionnel, pas un substitut. Ne recommandez pas la mémoïsation, l'état atomique ou les modifications du compilateur sans un problème mesuré de rendu ou de FPS.
2. Optimiser : Appliquez le correctif ciblé de la référence pertinente
3. Re-mesurer : Exécutez la même mesure pour obtenir des métriques mises à jour
4. Valider : Confirmez l'amélioration (par exemple, FPS 45→60, TTI 3,2s→1,8s, bundle 2,1MB→1,6MB)

Si les métriques ne se sont pas améliorées, revenez en arrière et essayez le correctif suivant suggéré.

Garde-fous de Révision

• Vérifiez les versions des bibliothèques avant de suggérer des correctifs spécifiques à une API. Exemple : FlashList v2 déprécie estimatedItemSize, ne le signalez donc pas comme manquant.
• Ne suggérez pas de modifications de dépendances useMemo ou useCallback à moins que le comportement ne soit démontrablement incorrect ou que le profilage ne montre un travail gaspillé lié à cette valeur.
• Ne signalez pas de fermetures obsolètes de manière spéculative. Montrez le chemin de lecture obsolète, une reproduction ou une preuve de profilage avant de le signaler.
• Lors du profilage d'un flux, mesurez l'interaction cible elle-même. Ne traitez pas la profondeur de l'arbre de composants ou le nombre de composants comme la principale preuve de performance.

Critique : FPS & Re-rendus

Profilez d'abord :

agent-device react-devtools status
agent-device react-devtools wait --connected
agent-device react-devtools profile start
agent-device react-devtools profile stop
agent-device react-devtools profile slow --limit 5
agent-device react-devtools profile rerenders --limit 5
agent-device react-devtools profile timeline --limit 20

Conduisez l'interaction cible avec des commandes agent-device normales entre profile start et profile stop.

Solution de repli manuelle lorsque agent-device n'est pas disponible : ouvrez les outils de développement React Native depuis Metro (j) ou le menu de développement, utilisez l'onglet Profileur et enregistrez la même interaction.

Pour le profilage des composants React en version release, connectez @callstack/inspector d'abord pour que les outils de développement React puissent se connecter à l'application en release, puis exécutez le flux agent-device react-devtools ci-dessus.

Correctifs courants :

• Remplacez ScrollView par FlatList/FlashList/Liste Légendaire pour les longues listes
• Après que le profilage montre des re-rendus en cascade, utilisez le compilateur React pour la mémoïsation automatique
• Après que le profilage montre de larges mises à jour du store/contexte, utilisez l'état atomique (Jotai/Zustand) pour réduire les re-rendus
• Utilisez useDeferredValue pour les calculs coûteux

Critique : Taille du Bundle

Analysez le bundle :

npx react-native bundle \
  --entry-file index.js \
  --bundle-output output.js \
  --platform ios \
  --sourcemap-output output.js.map \
  --dev false --minify true

npx source-map-explorer output.js --no-border-checks

Vérifiez l'amélioration après l'optimisation :

# Enregistrez la taille de base avant les modifications
ls -lh output.js  # Exemple : Avant : 2,1 MB

# Après avoir appliqué les correctifs, re-bundlez et comparez
npx react-native bundle --entry-file index.js --bundle-output output.js \
  --platform ios --dev false --minify true
ls -lh output.js  # Exemple : Après : 1,6 MB  (réduction de 24%)

Correctifs courants :

• Évitez les importations en baril (importez directement depuis la source)
• Supprimez les polyfills Intl inutiles seulement après avoir vérifié la couverture de l'API et des méthodes Hermes
• Évaluez le tree shaking (Expo SDK 52+ suppression expérimentale des importations/exports inutilisés, ou Re.Pack seulement si déjà configuré)
• Activez R8 pour le rétrécissement du code natif Android

Élevé : Optimisation TTI

Mesurez le TTI :

• Utilisez react-native-performance pour les marqueurs
• Mesurez uniquement les démarrages à froid (excluez les démarrages à chaud/tiède/préchauffage)

Correctifs courants :

• Pour React Native 0.78 et versions antérieures, désactivez la compression du bundle JS Android pour permettre le mmap Hermes
• Utilisez la navigation native (react-native-screens)
• Préchargez les écrans coûteux couramment utilisés avant de naviguer vers eux

Élevé : Performances Natives

Profilez le natif :

• iOS : Instruments Xcode → Time Profiler
• Android : Profileur CPU Android Studio

Correctifs courants :

• Utilisez des threads d'arrière-plan pour les travaux natifs lourds
• Préférez les méthodes asynchrones aux méthodes synchrones Turbo Module
• Utilisez le C++ pour le code critique pour les performances multiplateforme

Références

Documentation complète avec exemples de code dans references/ :

JavaScript/React (js-*)

Fichier	Impact	Description
js-lists-flatlist-flashlist.md	CRITIQUE	Remplacez ScrollView par des listes virtualisées
js-profile-react.md	MOYEN	Profilage avec agent-device react-devtools
js-measure-fps.md	ÉLEVÉ	Surveillance et mesure des FPS
js-memory-leaks.md	MOYEN	Chasse aux fuites mémoire JS
js-atomic-state.md	ÉLEVÉ	Modèles Jotai/Zustand
js-concurrent-react.md	ÉLEVÉ	useDeferredValue, useTransition
js-react-compiler.md	ÉLEVÉ	Mémoïsation automatique
js-animations-reanimated.md	MOYEN	Worklets Reanimated
js-bottomsheet.md	ÉLEVÉ	Optimisation des feuilles de fond (bottom sheet)
js-uncontrolled-components.md	ÉLEVÉ	Optimisation TextInput

Natif (native-*)

Fichier	Impact	Description
native-turbo-modules.md	ÉLEVÉ	Construction de modules natifs rapides
native-sdks-over-polyfills.md	ÉLEVÉ	Bibliothèques natives vs JS
native-measure-tti.md	ÉLEVÉ	Configuration de la mesure TTI
native-threading-model.md	ÉLEVÉ	Threads Turbo Module
native-profiling.md	MOYEN	Profilage Xcode/Android Studio
native-platform-setup.md	MOYEN	Guide des outils iOS/Android
native-view-flattening.md	MOYEN	Débogage de la hiérarchie des vues
native-memory-patterns.md	MOYEN	Mémoire C++/Swift/Kotlin
native-memory-leaks.md	MOYEN	Chasse aux fuites mémoire natives
native-android-16kb-alignment.md	CRITIQUE	Alignement des bibliothèques tierces pour Google Play

Bundling (bundle-*)

Fichier	Impact	Description
bundle-barrel-exports.md	CRITIQUE	Évitez les importations en baril
bundle-analyze-js.md	CRITIQUE	Visualisation du bundle JS
bundle-tree-shaking.md	ÉLEVÉ	Élimination du code mort
bundle-analyze-app.md	ÉLEVÉ	Analyse de la taille de l'application
bundle-r8-android.md	ÉLEVÉ	Rétrécissement du code Android
bundle-hermes-mmap.md	ÉLEVÉ	Désactivez la compression du bundle
bundle-native-assets.md	ÉLEVÉ	Configuration du catalogue d'actifs
bundle-library-size.md	MOYEN	Évaluez les dépendances
bundle-code-splitting.md	MOYEN	Mesures de sécurité du chargement de chunks distants

Problème → Correspondance de Compétence

Problème	Commencez par
L'application semble lente/saccadée	js-measure-fps.md → js-profile-react.md
Trop de re-rendus	js-profile-react.md → js-react-compiler.md
Démarrage lent (TTI)	native-measure-tti.md → bundle-analyze-js.md
Taille d'application importante	bundle-analyze-app.md → bundle-r8-android.md
Croissance de la mémoire	js-memory-leaks.md ou native-memory-leaks.md
Les animations perdent des images	js-animations-reanimated.md
Saccades/re-rendus de la feuille de fond	js-bottomsheet.md → js-animations-reanimated.md
Saccades de défilement de liste	js-lists-flatlist-flashlist.md
Latence TextInput	js-uncontrolled-components.md
Module natif lent	native-turbo-modules.md → native-threading-model.md
Problème d'alignement de bibliothèque native	native-android-16kb-alignment.md

Attribution

Basé sur "The Ultimate Guide to React Native Optimization" de Callstack.