Bonnes pratiques React Native

Vue d'ensemble

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

Format des Skills

Chaque fichier de référence suit un format hybride pour une recherche rapide et une compréhension approfondie :

• Quick Pattern : Snippets de code incorrect/correct pour un pattern matching immédiat
• Quick Command : Commandes shell pour les skills de processus/mesure
• Quick Config : Snippets de configuration pour les skills axés sur la configuration
• Quick Reference : Tableaux récapitulatifs pour les skills conceptuels
• Deep Dive : Contexte complet avec When to Use, Prerequisites, Step-by-Step, Common Pitfalls

Évaluations d'impact : CRITICAL (corriger immédiatement), HIGH (amélioration significative), MEDIUM (optimisation utile)

Quand appliquer

Consultez ces directives quand :

• Vous debuggez une UI lente/saccadée ou des animations
• Vous enquêtez sur des fuites mémoire (JS ou native)
• Vous optimisez le temps de démarrage de l'app (TTI)
• Vous réduisez la taille du bundle ou de l'app
• Vous écrivez des modules natifs (Turbo Modules)
• Vous profilez les performances React Native
• Vous reviewez du code React Native pour les performances

Notes de sécurité

• Traitez les commandes shell de ces références comme des opérations locales de développement. Reviewez-les avant de les exécuter, préférez les outils avec versions pinées, et évitez de diriger des scripts distants directement vers un shell.
• Traitez les bibliothèques et plugins tiers comme des dépendances qui nécessitent toujours les contrôles normaux de la chaîne logistique : pinez les versions, vérifiez la provenance, et mettez à jour selon votre processus de review standard.
• Traitez le code splitting Re.Pack comme une livraison d'artefacts first-party uniquement. Les chunks distants doivent venir d'origines HTTPS de confiance que vous contrôlez et être pinés à la version actuelle de l'app.

Directives ordonnées par priorité

Référence rapide

Workflow d'optimisation

Suivez ce cycle pour tout problème de performance : Measure → Optimize → Re-measure → Validate

1. Measure : Capturez les métriques de base avant les changements. Pour les problèmes d'exécution, préférez la timeline de commits, les re-render counts, les composants lents, la décomposition du commit le plus lourd, et le startup/TTI quand disponibles. La profondeur ou le nombre de composants dans l'arbre sont un contexte optionnel, pas des substituts.
2. Optimize : Appliquez le fix ciblé de la référence appropriée
3. Re-measure : Exécutez la même mesure pour obtenir les métriques mises à jour
4. Validate : Confirmez l'amélioration (p. ex. FPS 45→60, TTI 3,2s→1,8s, bundle 2,1MB→1,6MB)

Si les métriques n'ont pas amélioré, revertez et essayez le prochain fix suggéré.

Garde-fous de Review

• Vérifiez les versions de bibliothèques avant de suggérer des fixes API-spécifiques. Exemple : FlashList v2 déprécie estimatedItemSize, ne le signalez donc pas comme manquant là.
• Ne suggérez pas de changements de dépendances useMemo ou useCallback sauf si le comportement est manifestement incorrect ou que le profiling montre du travail gaspillé lié à cette valeur.
• Ne reportez pas les closures stales spéculativement. Montrez le stale read path, une repro, ou des preuves du profiler avant de le signaler.
• Quand vous profilez un flow, mesurez l'interaction cible elle-même. Ne traitez pas la profondeur de l'arbre de composants ou le nombre de composants comme la preuve principale de performance.

Critique : FPS & Re-renders

Profilez d'abord :

# Open React Native DevTools
# Press 'j' in Metro, or shake device → "Open DevTools"

Fixes courants :

• Remplacez ScrollView par FlatList/FlashList pour les listes
• Utilisez React Compiler pour la mémoization automatique
• Utilisez l'atomic state (Jotai/Zustand) pour réduire les re-renders
• Utilisez useDeferredValue pour les calculs coûteux

Critique : Bundle Size

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 optimisation :

# Record baseline size before changes
ls -lh output.js  # e.g., Before: 2.1 MB

# After applying fixes, re-bundle and compare
npx react-native bundle --entry-file index.js --bundle-output output.js \
  --platform ios --dev false --minify true
ls -lh output.js  # e.g., After: 1.6 MB  (24% reduction)

Fixes courants :

• Évitez les barrel imports (importez directement de la source)
• Supprimez les polyfills Intl inutiles seulement après avoir vérifié la couverture de l'API et des méthodes Hermes
• Activez tree shaking (Expo SDK 52+ ou Re.Pack)
• Activez R8 pour le shrinking du code natif Android

Haute : Optimisation TTI

Mesurez TTI :

• Utilisez react-native-performance pour les markers
• Mesurez uniquement les cold starts (excluez warm/hot/prewarm)

Fixes courants :

• Désactivez la compression du bundle JS sur Android (active Hermes mmap)
• Utilisez la navigation native (react-native-screens)
• Préchargez les écrans coûteux couramment utilisés avant de naviguer vers eux

Haute : Native Performance

Profilez native :

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

Fixes courants :

• Utilisez les threads de fond pour les travaux natifs lourds
• Préférez les méthodes Turbo Module async aux sync
• Utilisez C++ pour le code performance-critical multiplateforme

Références

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

JavaScript/React (js-*)

Native (native-*)

Bundling (bundle-*)

Recherche dans les références

# Find patterns by keyword
grep -l "reanimated" references/
grep -l "flatlist" references/
grep -l "memory" references/
grep -l "profil" references/
grep -l "tti" references/
grep -l "bundle" references/

Mapping Problème → Skill

Attribution

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