React - Higher Order Components (HOC)

15 Août 2023

Dans le domaine en constante évolution du développement web, la maîtrise des concepts avancés est essentielle pour créer des applications robustes et flexibles. Dans cet article, nous plongerons dans l'un de ces concepts fondamentaux de React : les Higher-Order Components, communément appelés HOCs.

Que vous soyez un développeur chevronné à la recherche de techniques avancées ou un débutant curieux désireux d'apprendre, nous parcourrons la création et l'application des HOCs étape par étape. Préparez-vous à enrichir votre boîte à outils de développement avec cette approche puissante tout en découvrant comment améliorer la lisibilité, la réutilisabilité et la maintenabilité de votre code.

Qu'est-ce qu'un Higher-Order Component ?

Imaginez que vous possédiez une pâtisserie spécialisée dans la création d'une grande variété de pâtisseries. Dans votre pâtisserie, vous avez des croissants, des muffins et des danoises. Chaque pâtisserie doit avoir une étiquette indiquant son type et ses ingrédients. Si vous deviez le faire manuellement pour chaque pâtisserie, cela demanderait beaucoup de temps. Au lieu de le faire manuellement, vous pouvez utiliser un "robot" qui le fera automatiquement pour vous.

Ce robot est un Higher-Order Component (HOC), une fonction qui prend un composant (votre pâtisserie) et renvoie votre pâtisserie avec des fonctionnalités ou des caractéristiques supplémentaires (dans ce cas, une étiquette indiquant son type et ses ingrédients).

Avantages

Les Higher-Order Components (HOCs) offrent plusieurs avantages significatifs qui améliorent la manière dont nous développons nos applications React. Voici certains de ces avantages, accompagnés d'exemples concrets :

Réutilisabilité : l'un des principaux atouts des HOCs est leur capacité à être réutilisés dans différentes parties de votre application. Étant donné qu'un HOC est une fonction avec une logique spécifique, vous pouvez le personnaliser pour répondre à vos besoins tout en le maintenant flexible. Par exemple, un HOC d'authentification pourrait être adapté pour gérer l'accès à différents types de contenu.
Séparation des préoccupations : au lieu d'encombrer un composant avec de nombreuses logiques distinctes, les HOCs permettent de séparer ces responsabilités en composants distincts. Vous pouvez facilement envisager de créer un HOC distinct pour chaque logique, ce qui rend vos composants plus clairs et mieux organisés.
Modularité du code : les HOCs ajoutent une couche modulaire à votre code. Vous pouvez ajouter ou supprimer un HOC sans affecter la fonctionnalité du composant sous-jacent, facilitant ainsi la maintenance et l'adaptation de votre application. En essence, les HOCs se nichent sans altérer la stabilité globale.
Facilitation des tests unitaires : en raison de leur nature isolée, les HOCs simplifient les tests unitaires. Vous pouvez tester la logique spécifique d'un HOC sans la complexité d'autres parties de l'application.

En combinant ces avantages, vous serez en mesure de créer des applications plus flexibles et plus faciles à entretenir tout en minimisant la duplication de code.

Cas pratique

Le problème

Prenons un exemple concret pour illustrer la pertinence des Higher-Order Components. Supposons que nous développons une application avec un système d'authentification. Dans cette application, différentes parties de l'interface nécessitent une authentification :

Page d'accueil : Cette page ne nécessite pas d'authentification.
Liste des livres : Cette liste peut être consultée sans authentification.
Top des livres : Cette section est réservée aux utilisateurs authentifiés.
Évaluations des utilisateurs : De même, seuls les utilisateurs connectés peuvent consulter les évaluations.

Imaginez que nous ayons un composant qui importe tous les autres :

1export const App = () => {
2  return (
3    <div>
4      <Home />
5      <BooksList />
6      <TopBook />
7      <UsersRating />
8    </div>
9  )
10}

Maintenant, considérons un composant pour chaque partie :

1export const Home = () => {
2  return (
3    <div>
4      <h1>Hey !</h1>
5      <p>This is a welcome message !</p>
6    </div>
7  )
8}

1export const BooksList = () => {
2  return (
3    <div>
4      <p>Books list</p>
5    </div>
6  )
7}

1export const TopBook = () => {
2  const isConnected = false
3
4  if(!isConnected) {
5    return (
6      <p>You don't have access !</p>
7    )
8  }
9
10  return (
11    <div>
12      <p>Top Book</p>
13    </div>
14  )
15}

1export const UsersRating = () => {
2  const isConnected = false
3
4  if(!isConnected) {
5    return (
6      <p>You don't have access !</p>
7    )
8  }
9
10  return (
11    <div>
12      <p>UsersRating</p>
13    </div>
14  )
15}

Nous remarquons que les deux composants avec la logique de restriction répètent le même code. Bien que ce ne soit pas un gros problème avec seulement deux composants, imaginez avoir 10 composants, cela représente beaucoup de répétition de code. Dans ce scénario, il est important de trouver une solution qui gère l'affichage conditionnel du contenu en fonction du statut d'authentification.

C'est là qu'interviennent les composants d'ordre supérieur (HOC).

Solution : Les Higher Order Components (HOCs)

Pour résoudre ce problème de répétition de code à plusieurs endroits, isolons la logique d'authentification dans un composant d'ordre supérieur (HOC) appelé withAuthentication :

1export const withAuthentication = (Component) => {
2  const isConnected = false
3
4  if (!isConnected) {
5    return <p>You don't have access !</p>
6  }
7
8  return (props) => <Component {...props} />
9}

Ensuite, nous appliquerons ce HOC aux composants qui nécessitent une restriction d'accès, comme ceci :

1export const TopBook = withAuthentication(() => {
2  return (
3    <div>
4      <p>Top Book</p>
5    </div>
6  )
7})

1export const UsersRating = withAuthentication(() => {
2  return (
3    <div>
4      <p>UsersRating</p>
5    </div>
6  )
7})

En supposant que vous récupériez isConnected soit des props soit du contexte, vous disposez désormais d'une logique isolée et réutilisable.

Aller plus loin

Nous pouvons aller plus loin avec les HOC. Imaginons maintenant que nous souhaitons effectuer un travail de mise en page avec une vue de profil :

1export const Profile = () => {
2  // This is the beta version of the Profile
3
4  return (
5    <div>
6      <p>Beta Profile</p>
7      <h1>Nicolas BROUARD</h1>
8    </div>
9  )
10}

Nous avons notre vue de profil et nous voulons ajouter une bannière "Bêta" pour indiquer qu'il s'agit en effet de la version bêta du profil. Nous pouvons également utiliser un HOC :

1export const withBetaBanner = (Component) => {
2  return (props) => (
3    <>
4      <header className="beta-header">This is a beta version</header>
5      <Component {...props} />
6    </>
7  )
8}

Vous pouvez facilement imbriquer plusieurs HOCs si besoin:

1const ProtectedBetaProfile = withAuthentication(withBetaBanner(Profile))
2
3return <ProtectedBetaProfile />;

Cela vous permet d'isoler différentes règles, rendant ainsi les tests unitaires plus faciles ! Vous pouvez également manipuler les props si nécessaire. Les HOC (Higher-Order Components) sont très puissants !

Vous pouvez également manipuler les props si nécessaire. Les HOC sont très puissants !

Conclusion

En conclusion, vous disposez désormais de tous les outils nécessaires pour exploiter pleinement la puissance des composants de haut niveau (HOC) dans vos projets React.

En combinant des concepts tels que la transmission de props, la composition de HOC et l'utilisation de TypeScript pour la sécurité des types, vous pouvez créer des composants plus flexibles, plus propres et plus efficaces. Les HOC offrent une approche pratique pour gérer les préoccupations transversales et simplifier vos composants, ce qui peut grandement faciliter la maintenance et l'extension de vos applications. Continuez à expérimenter avec les HOC dans vos projets et n'hésitez pas à explorer des exemples concrets pour approfondir votre compréhension.

Maîtriser l'art des HOC vous donnera un avantage significatif dans la construction d'applications React robustes et évolutives. Alors, plongez-vous dedans, appliquez ces connaissances et transformez vos composants en blocs de construction flexibles et puissants pour vos futures créations React.

Si vous avez apprécié ce tutoriel, envisagez de me suivre pour plus de contenu utile. Votre soutien est grandement apprécié ! Merci !

X _brdnicolas