React Hook : Les bases

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.

React Hook, les bases

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.

React Hook, les bases

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.

React Hook, les bases

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.

React Hook, les bases

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.

React Hook, les bases

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.

React Hook, les bases

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.

React Hook, les bases

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

React Hook, les bases

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.

React Hook, les bases

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.

Un projet Business Apps ? Nos développeurs Business Apps sont à votre écoute ! Contactez-nous !