useCallback

React 🟡 Mid

Definition

Hook qui memoize une fonction pour conserver la meme reference entre les rendus. Equivalent a useMemo(() => fn, deps).

Analogie

Comme donner toujours le meme numero de telephone 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

Passer un callback a un composant enfant memoize avec React.memo pour eviter ses re-rendus inutiles.

Anti-pattern

Utiliser useCallback sans React.memo sur l'enfant : la memoisation ne sert alors a rien.

Termes lies

#hooks#interview#performance