Optimisation des performances React avec `memo` et `useMemo`

1. Comprendre le "Rendu" et son Coût

Avant d'optimiser, il faut comprendre ce que l'on optimise. En React, le terme "rendu" (ou render) signifie que React exécute le code de votre fonction de composant pour savoir à quoi doit ressembler l'interface. Un re-rendu n'implique pas forcément une modification visible à l'écran (le DOM), mais c'est une étape de calcul qui peut être coûteuse.

Deux situations principales déclenchent le re-rendu d'un composant :

1. Un changement de son propre état (via useState, par exemple).
2. Le re-rendu de son composant parent.

Ce deuxième point est souvent la source de re-rendus inutiles. Si un composant parent se met à jour, tous ses enfants se re-rendent par défaut, même si leurs propres props n'ont pas changé.

Pour bien visualiser ce processus, la vidéo suivante est un excellent point de départ.

Dans une application R3F, un re-rendu inutile peut signifier recalculer des géométries, réévaluer des logiques complexes dans useFrame, ou déclencher des opérations coûteuses sur le GPU. Il est donc crucial de les maîtriser.

2. Comment Repérer les Re-rendus Inutiles ?

La première étape de toute optimisation est de mesurer. Il ne faut jamais optimiser "à l'aveugle". L'outil indispensable pour cela est le Profiler des Outils de Développement React (React DevTools).

Le Profiler vous permet d'enregistrer les interactions dans votre application et de visualiser quels composants se sont re-rendus, pourquoi, et combien de temps cela a pris.

Une fois que vous avez identifié un composant coûteux qui se re-rend inutilement, vous pouvez utiliser des techniques de mémoïsation.

3. Mémoïser des Calculs Coûteux avec useMemo

La mémoïsation est une technique d'optimisation qui consiste à mettre en cache le résultat d'une fonction et à le retourner si les mêmes entrées se présentent à nouveau, au lieu de recalculer le résultat.

Le hook useMemo applique ce principe. Il est parfait pour des calculs lourds (trier un grand tableau, effectuer une opération mathématique complexe, etc.) qui n'ont pas besoin d'être refaits à chaque rendu si leurs dépendances n'ont pas changé.

const memoizedValue = useMemo(() => {
  // Fonction de calcul coûteuse
  return computeExpensiveValue(a, b);
}, [a, b]); // Le tableau de dépendances

Le calcul ne sera ré-exécuté que si a ou b change.

La vidéo suivante illustre parfaitement ce concept avec un exemple simple et clair.

Pour une référence écrite, la documentation officielle est une excellente ressource.

4. Mémoïser des Composants avec React.memo

Maintenant que nous savons mémoïser une valeur, comment mémoïser un composant entier ? C'est le rôle de React.memo.

React.memo est un "Composant d'Ordre Supérieur" (Higher-Order Component ou HOC) qui enrobe votre composant. Si le composant enrobé est sur le point de se re-rendre avec les mêmes props que lors du rendu précédent, React sautera le re-rendu et réutilisera le résultat précédent.

function MyComponent(props) {
  /* le code du rendu */
}

// Enrobage avec memo
const MemoizedComponent = React.memo(MyComponent);

Reprenons notre première vidéo pour voir React.memo en action.

5. La Synergie Indispensable : memo, useMemo et useCallback

Vous pourriez penser qu'il suffit d'enrober tous vos composants dans React.memo. Malheureusement, c'est un peu plus complexe. React.memo effectue une comparaison superficielle (shallow comparison) des props. Si une des props est un objet, un tableau ou une fonction, cette comparaison échouera la plupart du temps.

Pourquoi ? Parce qu'en JavaScript, les objets, tableaux et fonctions sont des types par référence. Une fonction ou un objet défini à l'intérieur d'un composant est recréé à chaque rendu, obtenant une nouvelle référence en mémoire.

function Parent() {
  const [count, setCount] = useState(0);

  // `config` est un NOUVEL objet à chaque rendu de Parent
  const config = { color: 'blue' }; 
  
  // `handleClick` est une NOUVELLE fonction à chaque rendu de Parent
  const handleClick = () => console.log('clicked');

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      {/* Même si `config` et `handleClick` ont l'air identiques,
          leurs références changent, donc MemoizedChild se re-rendra toujours ! */}
      <MemoizedChild config={config} onClick={handleClick} />
    </div>
  );
}

C'est là que useMemo et son cousin, useCallback, deviennent essentiels pour faire fonctionner React.memo :

• useMemo est utilisé pour mémoïser des objets ou des tableaux.
• useCallback est utilisé pour mémoïser des fonctions.

useCallback est simplement un sucre syntaxique pour useMemo. Les deux lignes suivantes sont équivalentes :
useCallback(fn, deps) est équivalent à useMemo(() => fn, deps).

Voyons comment stabiliser nos props pour que React.memo fonctionne enfin.

La documentation de React explique également très bien cette synergie.

6. Règle d'Or : Ne Pas Optimiser Prématurément

La mémoïsation a un coût : elle consomme de la mémoire et ajoute de la complexité. L'utiliser partout serait contre-productif.

La règle d'or est : mesurer d'abord, optimiser ensuite.

1. Construisez votre application de la manière la plus simple possible.
2. Utilisez le Profiler pour identifier les goulots d'étranglement et les re-rendus lents.
3. Appliquez useMemo, useCallback et React.memo de manière ciblée, uniquement là où vous avez constaté un réel gain de performance.

Ces articles résument bien cette philosophie.

Conclusion

Dans cette leçon, nous avons exploré les fondations de l'optimisation de performance dans React, une compétence indispensable pour le développement 3D avec R3F.

Points clés à retenir :

• Les composants React se re-rendent lorsque leur état change ou lorsque leur parent se re-rend.
• Le Profiler des React DevTools est l'outil principal pour identifier les re-rendus inutiles et coûteux.
• useMemo met en cache le résultat d'un calcul pour éviter de le refaire inutilement.
• React.memo met en cache le rendu d'un composant pour l'éviter si ses props n'ont pas changé.
• Pour que React.memo soit efficace, les props de type objet, tableau ou fonction doivent être stabilisées avec useMemo ou useCallback.
• N'optimisez pas prématurément : mesurez toujours avant d'appliquer des techniques de mémoïsation.

Aperçu de la prochaine leçon :

Maintenant que vous savez optimiser la logique de vos composants, nous allons nous attaquer à un problème spécifique à la 3D : comment afficher des milliers d'objets identiques de manière performante ? La réponse réside dans une technique puissante appelée instancing. Nous verrons comment l'implémenter dans Three.js et R3F avec InstancedMesh.