HOC (Higher-Order Component)

React 🟡 Mid

Définition

Fonction qui prend un composant et retourne un nouveau composant enrichi. Pattern classique de réutilisation de logique, largement remplace par les hooks.

Analogie

Comme un cadre photo qui embellit toute photo qu'on y met : le HOC ajoute des fonctionnalités a tout composant.

Exemple de code

function withAuth(Component) {
  return function AuthWrapper(props) {
    const { user } = useAuth();
    if (!user) return <Redirect to="/login" />;
    return <Component {...props} user={user} />;
  };
}
const ProtectedPage = withAuth(Dashboard);

Cas d'usage

Ajouter de la logique transverse (auth, logging, theming) a plusieurs composants.

Anti-pattern

Empiler trop de HOCs, créant un 'wrapper hell' et rendant le debugging difficile.

Termes liés

#patterns#interview

En entretien

Explique-moi ce qu'est un HOC.
C'est une fonction qui prend un composant et retourne un nouveau composant enrichi, comme withAuth qui ajoute une vérification d'authentification autour d'un Dashboard. C'est un pattern classique de réutilisation de logique transverse, largement remplacé par les hooks aujourd'hui.
Quel est le piège classique avec les HOCs ?
Empiler trop de HOCs crée un 'wrapper hell' qui rend le debugging difficile. C'est une des raisons pour lesquelles les hooks ont largement remplacé ce pattern pour la logique transverse comme l'auth, le logging ou le theming.

Fiche mise à jour le 2026-09-27