Skip to main content

useMemo et useCallback

useMemo et useCallback

Ces deux hooks servent à mémoïser des valeurs ou des fonctions pour éviter des recalculs ou recréations inutiles entre les renders.

useMemo

Mémoïse le résultat d'un calcul coûteux.

import { useMemo } from 'react';

function Liste({ items, filtre }) {
  // Recalculé SEULEMENT quand items ou filtre change
  const itemsFiltres = useMemo(() => {
    return items.filter(item => item.nom.includes(filtre));
  }, [items, filtre]);

  return <ul>{itemsFiltres.map(i => <li key={i.id}>{i.nom}</li>)}</ul>;
}

useCallback

Mémoïse une fonction pour qu'elle garde la même référence entre les renders.

import { useCallback } from 'react';

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

  // Sans useCallback : nouvelle référence à chaque render → Enfant se re-rend inutilement
  // Avec useCallback : même référence si count ne change pas
  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []); // pas de dépendance car on utilise la forme fonctionnelle

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

const Enfant = React.memo(({ onClick }) => {
  console.log("Enfant rendu");
  return <button onClick={onClick}>+</button>;
});

Règle d'or

N'utilisez pas useMemo/useCallback par défaut sur tout. Ce sont des optimisations qui ont un coût. Utilisez-les seulement quand :

  • Le calcul est réellement coûteux (filtres lourds, sorts, calculs mathématiques)
  • La valeur/fonction est passée en prop à un composant mémoïsé (React.memo)
  • La valeur est une dépendance d'un useEffect
Back to top