useCallback

React 🟡 Mid

Définition

Hook qui memoize une fonction pour conserver la même référence entre les rendus. Équivalent a useMemo(() => fn, deps).

Analogie

Comme donner toujours le même numéro de téléphone a un contact : il n'a pas besoin de mettre a jour son carnet a chaque fois.

Exemple de code

const handleClick = useCallback((id) => {
  setItems(prev => prev.filter(i => i.id !== id));
}, []); // reference stable

<MemoizedList onDelete={handleClick} />

Cas d'usage

Stabiliser la référence d'un callback passé à un enfant mémoïsé. Avec React Compiler 1.0 (7 octobre 2025), le compilateur produit ces références stables lui-même ; useCallback manuel sert de soupape quand on veut garder la main.

Anti-pattern

useCallback sans React.memo (ou sans compilateur) sur l'enfant : la mémoïsation ne sert à rien ; et depuis le compilateur, l'ajouter partout alourdit le code sans gain.

Termes liés

#hooks#interview#performance

En entretien

Quelle différence entre useCallback et useMemo ?
useCallback mémoïse une fonction pour garder la même référence entre les rendus, c'est équivalent à useMemo(() => fn, deps) mais pour des fonctions. On l'utilise pour stabiliser la référence d'un callback passé à un enfant mémoïsé.
Quand est-ce que useCallback ne sert à rien ?
Sans React.memo, ou sans compilateur, sur l'enfant, la mémoïsation ne sert à rien. Depuis React Compiler 1.0 (7 octobre 2025), le compilateur produit lui-même ces références stables, donc l'ajouter partout alourdit le code sans gain.

Sources

react.dev/blog/2025/10/07/react-compiler-1

Fiche mise à jour le 2026-09-27