Comment optimiser les performances d'une application React Native ?

Question

Accepted Answer

L'optimisation des performances de React Native implique de minimiser les **re-rendus** inutiles, utiliser efficacement les **listes**, réduire **le travail du thread JS** et le trafic du bridge, optimiser les images et utiliser le thread natif pour les animations. Les performances sont importantes pour des applications fluides et réactives.

## Minimiser les re-rendus (une préoccupation clé de React)

```text
✓ Avoid unnecessary RE-RENDERS:
  → React.memo (memoize components), useMemo (values), useCallback (functions)
  → correct, stable KEYS in lists; avoid creating new objects/functions inline that
    cause children to re-render
  → proper state structure (don't put everything in one big state that re-renders all)
```

## Listes efficaces

```text
✓ Use FLATLIST (not ScrollView + map) for long lists — lazy rendering/virtualization
✓ Optimize FlatList: keyExtractor, getItemLayout, windowSize, removeClippedSubviews;
  keep item components light and memoized
✓ For very large/complex lists → FlashList (Shopify) — a faster drop-in alternative
```

## Thread JS et bridge

```text
✓ The JS thread runs your code — keep it free for responsiveness (avoid heavy synchronous
  work; it causes jank/dropped frames)
✓ Minimize BRIDGE traffic (old architecture) — frequent JS↔native passes are costly
  (the NEW ARCHITECTURE / JSI reduces this)
✓ Run ANIMATIONS on the native thread (useNativeDriver / Reanimated) — not the JS thread
✓ Offload heavy computation; debounce expensive operations
```

## Autres optimisations

```text
✓ Optimize IMAGES (sizes, caching — e.g. FastImage); lazy-load
✓ Reduce app startup time and bundle size; use Hermes (optimized JS engine)
✓ PROFILE to find bottlenecks (Flipper, performance monitor, React DevTools profiler)
✓ Test on lower-end devices (not just high-end)
```

## Pourquoi c'est important

Comprendre l'optimisation des performances de React Native est une connaissance précieuse au niveau senior car **une performance fluide est essentielle pour une bonne expérience utilisateur**, et React Native a des considérations de performance spécifiques, il est donc important pour construire des applications de qualité.

Comme React pour le web, une préoccupation clé est **de minimiser les re-rendus inutiles** (en utilisant React.memo, useMemo, useCallback, des clés stables et une structure d'état appropriée pour éviter de re-rendre les composants inutilement) — un problème de performance courant dans les applications React Native. **Les listes efficaces** sont essentielles : utiliser **FlatList** (pas ScrollView + map) pour les longues listes avec une optimisation appropriée (keyExtractor, getItemLayout, composants d'éléments légers et mémorisés), et utiliser **FlashList** pour les très grandes listes — puisque les listes sont courantes et celles mal rendues causent de véritables problèmes de performance.

Comprendre les considérations du **thread JS et du bridge** est particulièrement important et spécifique à React Native : le **thread JS doit rester libre** pour la réactivité (le travail synchrone lourd cause du saccade), le **trafic du bridge** (dans l'ancienne architecture) est coûteux donc la communication JS↔native doit être minimisée (la nouvelle architecture/JSI réduit cela), et de manière cruciale les **animations doivent s'exécuter sur le thread natif** (via useNativeDriver/Reanimated, pas le thread JS) pour la fluidité — ceux-ci reflètent l'architecture unique de React Native avec le threading JS/natif et ses implications de performance.

D'autres optimisations (optimisation des images avec mise en cache, réduction de la taille au démarrage/bundle, utilisation de Hermes, profilage pour trouver les goulots d'étranglement et tests sur les appareils bas de gamme) complètent la boîte à outils.

La performance fluide affecte directement l'UX, et l'architecture de React Native introduit des considérations spécifiques (thread JS, bridge, animations native-thread) au-delà de l'optimisation générale de React.

Puisque la performance fluide est essentielle pour l'UX et que React Native a des considérations de performance spécifiques (re-rendus, listes efficaces, le thread JS/bridge, les animations native-thread), et puisqu'une optimisation appropriée répondant à celles-ci maintient les applications fluides, comprendre l'optimisation des performances de React Native est une connaissance précieuse au niveau senior pour construire des applications réactives et polies — une compétence clé reflétant à la fois l'optimisation React (re-rendus, listes) et les préoccupations spécifiques à React Native (thread JS, bridge, animations natives), importante pour la sensibilisation à la performance attendue des développeurs React Native seniors.