Comprendre les composants d'ordre supérieur dans React avec des exemples

Les composants d’ordre supérieur (HOCs) sont un modèle dans React qui peut sembler déroutant au début, mais une fois compris, ils deviennent un outil précieux pour abstraire et réutiliser la logique des composants. Dans ce guide, vous apprendrez ce que sont les HOCs, comment les utiliser et quand ils sont pertinents — avec des exemples clairs tout au long.

Qu’est-ce qu’un composant d’ordre supérieur ?

Un composant d’ordre supérieur est une fonction qui prend un composant et renvoie un nouveau composant. Il ajoute un comportement, des props ou une logique au composant d’origine — sans le modifier directement.

Structure de base

const withExtraLogic = (Component) => {
  return function WrappedComponent(props) {
    // Ajoutez un comportement personnalisé ici
    return <Component {...props} />;
  };
};

Pensez-y comme à un décorateur : vous enveloppez quelque chose et l’améliorez avant de le transmettre.

Pourquoi utiliser un HOC ?

• Réutilisation du code : Abstraction de la logique répétée
• Préoccupations transversales : Journalisation, authentification, suivi
• Injection de props : Injecter des props basées sur la logique sans encombrer l’intérieur du composant

Exemple de base : withLogger

const withLogger = (Component) => {
  return function WrappedComponent(props) {
    useEffect(() => {
      console.log('Monté:', Component.name);
    }, []);
    return <Component {...props} />;
  };
};

const Hello = () => <h1>Hello</h1>;
const LoggedHello = withLogger(Hello);

// Utilisation
<LoggedHello />

Cela enregistre le nom du composant lorsqu’il est monté — sans toucher au composant Hello d’origine.

Autre cas d’utilisation : withWindowWidth

Ce HOC ajoute la largeur de la fenêtre comme prop à n’importe quel composant :

const withWindowWidth = (Component) => {
  return function WrappedComponent(props) {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
      const handleResize = () => setWidth(window.innerWidth);
      window.addEventListener('resize', handleResize);
      return () => window.removeEventListener('resize', handleResize);
    }, []);

    return <Component {...props} windowWidth={width} />;
  };
};

const DisplayWidth = ({ windowWidth }) => <p>Width: {windowWidth}px</p>;

const ResponsiveDisplay = withWindowWidth(DisplayWidth);

Cela vous permet de créer un composant réactif sans dupliquer la logique de redimensionnement.

HOCs vs hooks vs render props

Modèle Description Utiliser quand… HOC Fonction renvoyant un nouveau composant Vous voulez ajouter un comportement à plusieurs composants Hook Fonction réutilisable utilisant use* Vous voulez une logique d’état réutilisable Render props Passer une fonction comme enfant Vous voulez un rendu dynamique via une fonction

Comparaison approfondie avec les hooks

Les hooks sont préférés aujourd’hui pour le partage de logique, mais il y a des différences :

• Les HOCs sont des enveloppes externes. Les hooks s’exécutent à l’intérieur du composant.
• Les hooks offrent une composabilité — vous pouvez appeler plusieurs hooks dans un composant facilement.
• Les hooks fonctionnent naturellement avec les refs et l’état local, tandis que les HOCs nécessitent une attention particulière pour la transmission des ref.

Même logique, implémentation différente

Utilisation d’un hook au lieu de withWindowWidth :

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

const DisplayWidth = () => {
  const width = useWindowWidth();
  return <p>Width: {width}px</p>;
};

Cette version évite l’enveloppe supplémentaire et est plus lisible dans React moderne.

Limitations des HOCs

• Imbrication d’enveloppes : Trop de HOCs peuvent rendre l’arborescence des composants difficile à déboguer
• Nommage : Les composants d’enveloppe anonymes rendent les DevTools plus difficiles à lire
• Transmission des refs : Les refs standard ne fonctionnent pas à moins d’utiliser forwardRef

Exemple de problème de ref

const withWrapper = (Component) => (props) => <Component {...props} />;
const FancyInput = forwardRef((props, ref) => <input ref={ref} {...props} />);

Sans forwardRef, ref pointerait vers l’enveloppe, pas vers l’entrée réelle.

Bonnes pratiques

• Toujours transmettre les props : <Component {...props} />
• Nommer vos composants enveloppés pour le débogage :

WrappedComponent.displayName = `withLogger(${Component.displayName || Component.name})`;

• Évitez les HOCs lorsque les hooks peuvent faire le travail plus clairement

Conclusion

Les composants d’ordre supérieur sont une façon flexible d’étendre et de réutiliser la logique des composants. Bien que les hooks soient plus courants dans React moderne, les HOCs ont toujours leur place — surtout lorsque vous voulez ajouter de la logique autour des composants existants sans changer leur fonctionnement interne. Utilisez-les lorsqu’ils rendent votre code plus clair, pas plus complexe.

FAQ