Optimiser les performances React

Quand une application React grossit, l'optimisation des performances devient rapidement importante. L'objectif n'est pas de tout optimiser à l'avance, mais de corriger les vrais goulots d'étranglement au bon moment.

1. Découpage du code

Le code splitting permet de charger certaines parties de l'application à la demande.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </React.Suspense>
  );
}

2. Mémoïsation

React.memo peut éviter des re-rendus inutiles sur des composants fonctionnels quand leurs props ne changent pas.

3. useMemo et useCallback

Ces hooks sont utiles pour mémoriser des calculs coûteux ou stabiliser certaines fonctions.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

4. Virtualisation

Pour les longues listes, des bibliothèques comme react-window permettent de n'afficher que les éléments visibles à l'écran.

5. Limiter les fonctions recréées inutilement

Les fonctions définies dans le rendu peuvent provoquer des recalculs ou des re-rendus. Il faut les surveiller dans les zones sensibles.

6. Utiliser le build de production

Une application React doit toujours être mesurée en build de production, car le mode développement ajoute des vérifications coûteuses.

7. Profiler l'application

Le React DevTools Profiler aide à repérer les composants trop souvent rendus ou trop lents.

8. Debounce et throttle

Sur des événements fréquents comme le scroll, le resize ou la recherche, limiter la fréquence d'exécution améliore souvent nettement la fluidité.

9. Réduire les re-rendus inutiles

Il est important d'identifier précisément ce qui provoque un rendu, puis de simplifier les dépendances ou la structure des composants.

10. Optimiser les images et assets

Les performances perçues dépendent aussi du poids des images, des polices et des ressources externes.

En résumé, il faut mesurer d'abord, optimiser ensuite, et concentrer les efforts sur les zones qui ont un vrai impact utilisateur.