Passer au contenu principal

Comprendre les Higher-Order Components (HOC) en React

Les Higher-Order Components (HOC) sont un pattern de composition qui permet de réutiliser la logique de composants sans dupliquer le code.

Un HOC est une fonction qui prend un composant en argument et retourne un nouveau composant enrichi. Ce composant enveloppé peut recevoir des props supplémentaires, un état local ou un comportement spécifique.

Autrement dit : Un HOC sert à partager du comportement entre composants sans modifier leur structure interne.

 

Exemple de Higher-Order Component en React

import React from 'react';

// Définition du HOC
const withExtraProps = (WrappedComponent) => {
  return (props) => {
    return <WrappedComponent {...props} extraProp="value" />;
  };
};

// Composant d'origine
const MyComponent = (props) => {
  return <div>{props.extraProp}</div>;
};

// Composant enrichi
const EnhancedComponent = withExtraProps(MyComponent);

const App = () => {
  return <EnhancedComponent />;
};

export default App;

Dans cet exemple :

  • withExtraProps est la fonction HOC.

  • Elle prend MyComponent comme argument et renvoie un nouveau composant enrichi EnhancedComponent.

  • Le HOC ajoute une prop extraProp automatiquement.

Le HOC agit donc comme un décorateur, ajoutant une fonctionnalité à un composant existant.

 

Cas d’usage des Higher-Order Components (HOC)

Les HOC sont particulièrement utiles pour injecter des comportements réutilisables dans plusieurs composants.

  • Authentification : vérifier qu’un utilisateur est connecté avant d’afficher une page.

  • Journalisation : suivre les actions ou événements d’un composant.

  • Theming : injecter les couleurs, styles ou variables d’un thème.

  • Data fetching : récupérer des données puis les passer en props à un composant.

 

Bonnes pratiques pour créer un HOC efficace

  • Ne modifiez jamais le composant d’origine : un HOC doit toujours retourner un nouveau composant sans effet de bord.

  • N’abusez pas des HOC : leur empilement excessif (ce qu’on appelle le wrapper hell) rend le code difficile à lire et à déboguer.

Retour en haut