HOC (Higher-Order Component)

Definition

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

Analogie

Comme un cadre photo qui embellit toute photo qu'on y met : le HOC ajoute des fonctionnalites 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

Termes lies