02 • 34 • 09 • 31 • 70
La version 16.8 de React (ou ReactJs) a introduit une nouveauté : les hooks. Les hooks sont une nouvelle façon d'offrir des composants en React et permettent l’utilisation de “function” avec la même finalité que les “class” utilisées jusque là.
Un hook est une fonction qui permet d’utiliser le cycle de vie ou encore des états dans les composants sous forme de “function”. Un hook, par convention, commence par le mot clé “use” en minuscule,
Exemple : “useState”.
Jusqu’à la version actuelle, React 18, ceux-ci sont particulièrement utilisés. Leurs intérêts sont multiples : se libérer des “class” et du mot clé “this”, une meilleure réutilisabilité des fonctionnalités, etc.
Quelques hooks dans React
useState
Le hook “useState” permet l’utilisation de variables de “state” dans un composant React.
- Ce hook prend en paramètre : une valeur initiale ou une fonction renvoyant une valeur initiale.
- Celui-ci retourne en échange : un tableau avec la valeur courante du “state” ainsi qu’une fonction pour la mettre à jour.
useMemo
Le hook “useMemo” permet de mémoriser une variable qui sera uniquement recalculée lorsqu’une de ses dépendances sera mise à jour, le tout dans un contexte d’optimisation.
- Ce hook prend en paramètre : une fonction renvoyant la valeur calculée
- Celui-ci retourne en échange : la valeur calculée.
useRef
Le hook “useRef” permet de créer (le plus souvent) une référence à un composant ou un élément. Contrairement aux “useState” et “useMemo”, lorsque sa valeur change, le composant n’est pas mis à jour.
- Ce hook prend en paramètre : la valeur par défaut, “null” le plus souvent.
- Celui-ci retourne en échange : la valeur de la référence contenu dans la propriété “current” d’un object.
useCallback
Le hook “useCallback” permet d'optimiser l’utilisation de fonction. En effet, dans le cas où vous avez besoin de passer une fonction en props à un composant, utiliser un “useCallback” est plus optimisé que de passer la fonction directement. En effet, si le composant parent est mis à jour, alors le composant enfant (recevant le props) le sera également si une fonction est passée en paramètre, car React ne sera pas capable de s’assurer qu’il s’agit bien de la même fonction, contrairement à si vous utilisez un “useCallback”. Ce hook sera mis à jour uniquement si une de ses dépendances est mise à jour.
- Ce hook prend en paramètre : la fonction callback.
- Celui-ci retourne en échange : la fonction mémorisée.
useEffect
Le hook “useEffect” permet l’utilisation de “Side Effects”. On peut l’utiliser pour déclencher des appels API ou tout autre effet, lorsqu'un élément de ses listes de dépendances est mise à jour. Celui-ci vient remplacer les méthodes du cycle de vie d’un composant. S’il n’a aucune dépendance, le hook sera exécuté à chaque rendu.
- Ce hook prend en paramètre : la fonction “effect”. A la fin de celle-ci, il est possible de retourner une fonction qui servira à nettoyer un listener par exemple.
- Celui-ci retourne en échange : void.
useReducer
Le hook “useReducer” devrait parler aux connaisseurs de Redux. Celui-ci permet une gestion d’une ou plusieurs variables (comme un “state”) via des actions pour les mettre à jour.
- Ce hook prend en paramètre : la fonction reducer et la valeur initiale du state.
- Celui-ci retourne en échange : un tableau avec la valeur courante du “state” et la fonction pour mettre à jour ce state.
Bien sûr il existe d'autres hooks proposés par React : useContext, useImperativeHandle, useLayoutEffect ou encore useDebugValue. Le choix a été fait ici d’aborder les plus communs.
Valider vos hooks avec le plugin Eslint de React
Afin d’améliorer la qualité, lors de la déclaration de hook, React propose son propre plugin Eslint (linter de code) permettant de valider les hooks sur deux aspects :
- Vérification de la règle des hooks : un hook ne doit pas être présent en dehors d’un composant React, et les hooks d’un composant doivent toujours être appelés dans le même ordre.
- Vérifier les dépendances d’un hook
Hooks personnalisés
Il est bien sûr possible de créer vos propres hooks afin d’y mettre en place votre lot d'éléments réutilisables. C’est notamment l’objectif de certains projets comme usehooks.com.
Par exemple, on peut imaginer un hook qui retournerait la valeur d’une variable lors d’un précédent rendu, bien utile pour comparer la valeur courante d’un élément à son ancienne.
Les React Hook sont des fonctions puissantes qui ouvrent beaucoup de possibilités d'optimisation. Et c’est bien dans tout ce contexte de performance que Next Decision s’inscrit pour répondre à vos besoins métier via des interfaces dédiées innovantes.