Back to blog

Ce que vous devez savoir sur les Hooks React, avant de les utiliser

·7 min read·Originally published on Medium

Commençons par pourquoi ? Pourquoi devons-nous utiliser React Hooks ?

Le principal défi que nous avons lors du développement de notre application React est de savoir comment rendre la logique de certains composants énormes réutilisable pour la partager entre les composants et éviter la duplication, ce qui nous amène à utiliser des modèles de conception qui résolvent ce problème comme HOC (high order component), render prop, drill prop, ou mixins, qui peuvent tous conduire à un code complexe difficile à écrire, améliorer, maintenir et tester.

Ces modèles de conception sont les plus utilisés pour surmonter ce genre de défi, mais absolument avec un coût, puisque chaque solution a son coût : ces approches sont accompagnées d'un mécanisme complexe à réfléchir, une méthode implicite d'implémentation qui rend le code difficile à comprendre et localiser.

Les hooks React nous donnent la possibilité d'utiliser uniquement des composants fonctionnels pour tous nos besoins sur les composants de classe pour éviter d'utiliser ces modèles.

Les composants fonctionnels sont plus faciles à lire et à tester avec moins de code. Avant les hooks, un composant fonctionnel avait une limitation car il ne pouvait pas avoir son état local et ses méthodes de cycle de vie, mais maintenant avec React Hooks, il devient possible d'avoir un état local et des méthodes de cycle de vie, et enfin, arrêtez de penser à l'effrayant mot-clé « THIS ».

Je vous recommande et vous encourage à lire ces articles, afin que vous puissiez voir les avantages des composants fonctionnels :

Les React Hooks améliorent l'expérience de développement en utilisant la composition au lieu de l'héritage, en s'appuyant sur des fonctions et non sur des classes. Ils apportent la pièce manquante de React : partager la logique entre les composants fonctionnels de manière sophistiquée. Les Hooks rendent le besoin d'utiliser des design patterns tels que prop drilling, render props et les HOC dans la plupart des cas inutile.

Et comme Sophie Alpert dit dans React Conf 2018 :

  • Il est difficile de réutiliser la logique avec état entre les composants
  • Les composants complexes deviennent difficiles à comprendre
  • Les classes confondent les personnes et les machines

Les hooks viennent résoudre ces problèmes actuels :

  • Wrapper hell (causé par les design patterns : HOC, render prop, drilling prop)
  • Composants énormes (difficiles à tester et à maintenir, code difficile à co-localiser)
  • Classes déroutantes (mot-clé this + difficile de le rendre réutilisable)

Les problèmes mentionnés ci-dessus étant liés les uns aux autres, nous ne pouvons pas les résoudre de manière isolée.

Les hooks React apportent une nouvelle API qui frappe ces trois problèmes à la fois afin que nous puissions nous assurer qu'ils sont morts :).

« In the longer term, we expect Hooks to be the primary way people write React components » — React Doc

Si les Hooks sont aussi importants, pourquoi ne pas en apprendre davantage.

Alors, qu'est-ce que React Hooks ? De quoi s'agit-il ?

Ils sont collectivement appelés hooks : ce sont des fonctions spéciales qui ajoutent un état, une fonctionnalité de cycle de vie, une optimisation des performances, etc. à vos composants fonctionnels.

Ce sont 10 fonctions intégrées qui ont leur nom unique commençant toutes par « use », mais avec des fonctionnalités et des cas d'utilisation différents. Elles sont complètement facultatives : vous n'avez pas à réécrire vos classes existantes, mais vous pouvez commencer à les utiliser dans les nouveaux composants, car React est une question d'adoption progressive.

Les Hooks React ne sont que des fonctions qui acceptent un argument et retournent une valeur. De plus, vous pouvez créer les vôtres facilement en tant que Hook personnalisé.

Si vous vous demandez comment fonctionnent ces hooks sous le capot, je vous propose ces articles :

Avant de les utiliser et de les voir en pratique, nous devons connaître les règles d'utilisation de ces hooks.

Nous devons respecter ces règles sinon nous obtiendrons une confusion et un résultat inattendu, puisque React repose sur l'ordre dans lequel les Hooks sont appelés : l'ordre des appels des Hooks doit être le même à chaque rendu.

React ne lancera pas nativement d'erreur ou d'avertissement pour vous le faire savoir : vous devez ajouter un plugin linter qui garantit et applique ces règles automatiquement dans vos projets.

Il n'y a que deux règles à suivre :

  1. Appelez uniquement les hooks au niveau supérieur, c'est-à-dire pas dans les conditions, les boucles ou les fonctions imbriquées.
  2. Appelez uniquement les hooks depuis les fonctions React, c'est-à-dire les composants fonctionnels ou les hooks personnalisés.

Voyons-les maintenant un par un en commençant par celui que vous utiliserez le plus :

useState : Ce hook nous donne la possibilité de faire en sorte que les composants fonctionnels aient leur état local via une API très simple.

useReducer : Ce hook nous donne un moyen facile d'organiser notre gestion d'état. Si vous êtes déjà familier avec Redux, vous le trouverez facile à comprendre et à utiliser.

useEffect : Ce hook a été fait pour les effets secondaires. C'est une combinaison de componentDidMount, componentDidUpdate et componentWillUnmount en un seul endroit.

useContext : Cela nous donne la possibilité de transmettre des données dans l'arborescence des composants sans utiliser de prop drilling ou une bibliothèque tierce comme Redux.

useCallback : Nous donne un bon gain de performances en mémorisant le callback donné et en le mettant à jour lorsque les dépendances données changent.

useMemo : Ce hook met en cache certaines données, économisant du temps de calcul dans notre application et, espérons-le, la rendant plus réactive.

Voir les autres Hooks ici.

Avantages et inconvénients

Il est maintenant temps de voir les avantages et les inconvénients de ces Hooks React.

Les avantages :

  • Une meilleure alternative à certains modèles de conception courants.
  • Facile à tester et à entretenir (composants fonctionnels).
  • Créez des composants isolés réutilisables pour éviter toute logique redondante.
  • Facile à utiliser, à écrire et à co-localiser.

Les inconvénients :

  • Il faut respecter ses règles ; sans plugin linter, il est difficile de savoir quelle règle a été enfreinte.
  • Besoin d'un temps considérable de pratique pour les utiliser correctement (ex : useEffect).
  • Soyez conscient de la mauvaise utilisation (ex : useCallback, useMemo). Vous pouvez lire cet article de Kent C. Dodds.

Si nous mettons le pour et le contre dans la balance, les avantages vont gagner, car le poids des problèmes que les hooks résolvent est très lourd, et ses inconvénients sont faciles à aborder et à éviter.

Conclusion

Pour récapituler ce que nous avons appris : React Hooks est venu résoudre un problème très courant que tout le monde qui utilise React rencontre. Ils encouragent l'utilisation de composants fonctionnels pour bénéficier de leur simplicité et de leur efficacité pour une base de code évolutive, maintenable et testable.

Puisque tout a ses inconvénients, les React Hooks ont aussi les leurs, dont nous devons être conscients. Respectez les recommandations de l'équipe React pour éviter les comportements inattendus.

Notez que :

« The main motivation is being able to extract and reuse logic between components without introducing extra nesting... » — Dan Abramov

« With hooks we separate code not based on the lifecycle method name but based on what the code is doing » — Dan Abramov

N'hésitez pas à nous faire part de vos réflexions sur React Hooks.

Sources