Ce que vous devez savoir sur les Hooks React, avant de les utiliser.
Au début de 2019 et comme prévu, la nouvelle version 16.8.0 de React est livrée avec la nouvelle implémentation stable de React Hooks.
Ces hooks vont changer les règles du jeu pour la communauté React, avant de commencer à utiliser React Hooks, nous devrions nous poser quelques questions très utiles qui nous aideront à bien comprendre cette nouvelle fonctionnalité.
Tout d’abord, pourquoi React a ajouté cette fonctionnalité ? quel est le problème que React Hooks résoudra ? Pourquoi des crochets et pas d’autres choses ?
Oui, c’est ce que nous devrions d’abord poser comme questions, généralement, tout le monde est enthousiasmé par les nouvelles choses, en commençant à les utiliser sans comprendre les raisons de l’existence même.
Puisque toutes les nouveautés ne sont pas bonnes pour vos projets, votre équipe …, ces questions vous aideront à être confiant dans vos choix (quand utiliser et comment), capable de critiquer et d’exprimer clairement vos pensées à ce sujet.
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, or 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 à 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 peut 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 :
Functional vs Class-Components in React
React stateless functional components nine wins you might have
Les React Hooks améliorent l’expérience de développement en utilisant la composition au lieu de l’héritage en relais sur des fonctions et non sur des classes, ils apportent la pièce manquante of React, partageant la logique entre les composants fonctionnels, avec une manière sophistiquée, les Hooks rendent le besoin d’utiles des designs patterns tels que prop drilling, render props, et les HOCs 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 (caused by 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 apporte une nouvelle API qui frappe ces trois problèmes avec 10 pierres à la fois afin que nous puissions nous assurer qu’elles sont mortes :).
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 une `` utilisation ‘’ de trois lettres, mais avec des fonctionnalités et des cas d’utilisation différents, elles sont complètement facultatives, vous n’avez pas à réécrire votre classe existante, mais vous pouvez commencer à les utiliser dans les nouveaux, car React est une question d’adoption progressive.
Les Hooks React ne sont que des fonctions qui acceptent un argument et une valeur de retour. De plus, vous pouvez créer les vôtres facilement en tant que Hook personnalisé.
Si vous vous demandez comment fonctionnent ces crochets sous les capots, je vous propose ces articles :
React hooks: not magic, just arrays
Under the hood of React’s hooks system
Avant de les utiliser et de les voir en pratique, nous devons connaître les règles d’utilisation de ces crochets.
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 Hooks doit être le même sur 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 comme vous pouvez le voir dans l’exemple ci-dessous.
- 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, de configurer des données dans notre application, dans l’arborescence des composants sans utiliser de forage prop ou une bibliothèque tierce comme redux.
- useCallback: Nous donne un bon gain de performances en mémorisant le rappel 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 sur notre application et, espérons-le, la rendant plus réactive dans le processus.
Voir les autres Hooks ICI.
Avantages et inconvénients
Il est maintenant temps de voir les avantages et les inconvénients de ces crochets 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 (Exp: useEffect).
- Soyez conscient de la mauvaise utilisation (Exp: useCallback, useMemo). Vous pouvez lire cet article par kentcdodds.
Si nous mettons le pour et le contre dans la balance, les avantages vont gagner, car le poids des problèmes que les hameçons 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 utilise React qu’ils ont, ils encouragent l’utilisation de composants fonctionnels pour bénéficier de sa simplicité et de son efficacité pour une base de code évolutive, maintenable et testable.
Puisque tout a ses inconvénients, les hooks de réaction ont aussi les leurs, dont nous devons être conscients, respectez les recommandations de l’équipe de réaction pour éviter les comportements inattendus.
Noter que:
“The main motivation is being able to extract and reuse logic between components without introducing extra nesting into the tree.
The fact that this design also eliminates the need for class gotchas is a consequence, not the main motivation. ” — 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:
https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
https://www.richardkotze.com/coding/hoc-vs-render-props-react
https://reactjs.org/docs/higher-order-components.html
https://reactjs.org/docs/render-props.html
https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108
