Tutoriel React — Chapitre 19

Plan du chapitre

• 1) Rappel : pourquoi ça re-render ?
• 2) React.memo : mémoriser un composant
• 3) useCallback : mémoriser une fonction
• 4) useMemo : mémoriser un calcul
• 5) Quand optimiser (et quand ne pas le faire)
• 6) Erreurs fréquentes
• 7) Résumé (à retenir)
• 8) Exercice pratique

1) Rappel : pourquoi ça re-render ?

Un composant React se re-render quand :

• son state change
• ses props changent
• son parent se re-render (et lui re-render aussi)

Re-render ne veut pas dire “mauvais”. C’est normal. On optimise seulement quand on a un vrai problème.

2) React.memo : mémoriser un composant

React.memo dit à React : “si les props n’ont pas changé, ne re-render pas ce composant”. C’est utile quand un composant enfant coûte cher à re-render, et que le parent re-render souvent.

import React from "react";

function BigChild({ title }) {
  console.log("BigChild re-render");
  return <h3>{title}</h3>;
}

export default React.memo(BigChild);

Si title reste identique, BigChild ne se re-render pas même si le parent re-render.

3) useCallback : mémoriser une fonction

Problème fréquent : à chaque re-render, une fonction est “recréée”. Donc, si vous la passez en prop à un enfant, React considère que la prop a changé (nouvelle référence).

Exemple : sans useCallback

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

  const handleClick = () => {
    console.log("click");
  };

  return <Child onClick={handleClick} />;
}

À chaque re-render du Parent, handleClick est une nouvelle fonction. Si Child est memoïsé, il re-render quand même car la prop change.

Solution : useCallback

import { useCallback, useState } from "react";

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

  const handleClick = useCallback(() => {
    console.log("click");
  }, []);

  return <Child onClick={handleClick} />;
}

4) useMemo : mémoriser un calcul

Si vous avez un calcul coûteux (ex : filtrer une grande liste, calcul mathématique lourd), vous ne voulez pas le recalculer à chaque re-render si les données n’ont pas changé.

Sans useMemo

const filtered = items.filter((x) => x.includes(search));

Avec useMemo

import { useMemo } from "react";

const filtered = useMemo(() => {
  return items.filter((x) => x.includes(search));
}, [items, search]);

Le calcul est refait uniquement si items ou search change.

5) Quand optimiser (et quand ne pas le faire)

À retenir : optimiser trop tôt complique le code. Optimisez quand vous avez :

• des listes très grandes
• des composants lourds
• des re-renders visibles (lenteur)
• un vrai besoin de stabilité des props (memo + callback)

6) Erreurs fréquentes

7) Résumé (à retenir)

• React.memo évite de re-render un composant si ses props n’ont pas changé.
• useCallback stabilise une fonction passée en prop.
• useMemo stabilise un résultat de calcul.
• On optimise seulement quand c’est utile.

8) Exercice pratique

Créez une liste de 1000 éléments (ex : des noms) et un champ de recherche.

• Filtrez la liste selon la recherche.
• Utilisez useMemo pour éviter de recalculer le filtre inutilement.
• Créez un composant enfant List memoïsé avec React.memo.
• Passez une fonction “onSelect” au composant List, et stabilisez-la avec useCallback.