Custom Hook

React 🟡 Mid

Définition

Fonction JavaScript prefixee par 'use' qui encapsulé de la logique réutilisable composée d'autres hooks. Chaque appel créé sa propre instance de state.

Analogie

Comme une recette de cuisine : tu la réutilisés dans différents repas, mais chaque plat a ses propres ingrédients (state).

Exemple de code

function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return debounced;
}

Cas d'usage

Extraire et réutiliser de la logique stateful entre composants (fetch, debounce, form, auth).

Anti-pattern

Créer un custom hook pour encapsuler du code qui ne contient aucun hook : une simple fonction suffit.

Termes liés

#hooks#interview#patterns

En entretien

Explique-moi ce qu'est un custom hook et à quoi ça sert.
C'est une fonction JS préfixée par 'use' qui encapsule de la logique réutilisable composée d'autres hooks, comme useDebounce qui réutilise useState et useEffect. Chaque appel crée sa propre instance de state, comme une recette qu'on réutilise mais avec des ingrédients différents à chaque fois.
Quand est-ce que tu éviterais de créer un custom hook ?
Si le code n'appelle aucun hook, une simple fonction suffit, pas besoin de l'encapsuler dans un 'use'. Les custom hooks servent à extraire de la logique stateful réutilisable entre composants, comme le fetch, le debounce ou l'auth.

Fiche mise à jour le 2026-09-27