Comprendre les Composants d'Ordre Supérieur (HOC) en React

Les composants d'ordre supérieur, ou HOC (High Order Components), sont un concept avancé de React qui peut initialement sembler complexe, mais qui s'avère très utile pour la réutilisation du code. La réponse correcte à la question est : un HOC est un composant qui retourne un autre composant.

Que sont les Composants d'Ordre Supérieur ?

Dans React, un composant d'ordre supérieur est une fonction qui prend un composant et renvoie un nouveau composant. Les HOC sont un moyen de réutiliser la logique des composants, ce qui permet de créer de nouveaux composants par composition. Le pattern HOC peut être utilisé pour de nombreuses tâches, telles que la manipulation de props, le contrôle d'accès, et l'injection de données.

Un HOC est en quelque sorte une version de composant des fonctions de grandeurs supérieures. En effet, en programmation fonctionnelle, une fonction d'ordre supérieur est une fonction qui peut prendre en paramètre une autre fonction et/ou retourner une fonction.

Exemple d'un HOC

Pour comprendre le fonctionnement d'un HOC, prenons un exemple simple. Imaginez que vous avez un composant UserProfile qui récupère des données d'utilisateur depuis un endpoint API. Vous avez aussi un autre composant BlogPosts qui récupère des données de blog depuis un autre endpoint API. Les deux composants utilisent une méthode de fetch pour obtenir leurs données, ce qui fait donc du code dupliqué.

À la place, vous pourriez créer un HOC withData qui s'occupe du fetch et passe les données en tant que props au composant qu'il encapsule.

function withData(WrappedComponent, endpoint) {
  return class extends React.Component {
    state = { data: null };

    componentDidMount() {
      fetch(endpoint)
        .then(response => response.json())
        .then(data => this.setState({ data }));
    }

    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

const UserProfileWithData = withData(UserProfile, '/user-profile-endpoint');
const BlogPostsWithData = withData(BlogPosts, '/blog-posts-endpoint');

Dans cet exemple, withData est un HOC qui récupère des données depuis une API, met à jour son propre state, et rend le composant inclus avec les nouveaux data passés en props.

Les Meilleures Pratiques pour les HOC

Bien que les HOC soient très utiles pour la réutilisation du code, ils doivent être utilisés avec précaution pour éviter des pièges communs. Par exemple, vous devriez toujours transmettre tous les props non utilisés au composant encapsulé pour assurer une transparence maximale.

De plus, les HOC peuvent rendre l'arbre de composants plus compliqué à comprendre, surtout quand plusieurs HOCs sont enchaînés. Pour cette raison, il est recommandé de les utiliser de manière pragmatique et de toujours documenter leur utilisation et leur comportement.