Présentation des hooks React

Les hooks sont apparu avec la version 16.8 de React et avec eux dans leurs bagages, un tas de fonctionnalité qui vont alors faciliter la vie des développeurs qui ne veulent pas passer par les composantes classes.

Présentation

Les hooks sont des fonctions intégrées à ReactJS qui sont utilisable uniquement avec les composants fonctionnels. Leur utilisation est donc impossible dans des composants fait à base de classe.

Ils sont apparus avec comme objectif de rendre le code « plus propre » et de régler un certain nombre de problèmes existant en React. Parmi ces problèmes, ont compte notamment la difficulté de réutiliser la logique à état, l’utilisation de this dans les composantes classes qui peut paraître difficiles à appréhender ou encore la compréhension des composants complexe de par la logique à état qui peuvent augmenter le nombre bug dans vos applications.

Les hooks permettent alors de découper les composants en petite fonction et donc de donner la possibilité de gérer l’état local d’un composant pour le rendre plus prévisible par exemple.

Bref, tout cela pourrait laisser penser qu’il faut absolument utiliser les hooks et donc réécrire votre code pour les intégrer. Sachez donc que les hooks fonctionnent très bien avec du code existant, donc, si vous souhaitez migrer vers les hooks, faite le petit à petit, rien ne sert de se précipiter.

Si vous travaillez en équipe, il faudra aussi s’assurer que tous les membres de celle-ci sont à l’aise avec les hooks.

Il est temps maintenant de passer à la découverte des hooks !

Liste (non-exhaustive)

Nous allons entrer dans les détails des hooks, cette liste ne sera pas exhaustive, mais je vais globalement parler des hooks qui j’utilise le plus.

useState

useState est un hook qui permet d’ajouter un état local à une application.

const [state, setState] = useState(0)

Cela déclare donc une variable d’état (state) et une fonction qui permet de la modifier (setState). À noter que vous pouvez donner n’importe quel nom à vos variables d’état. Il faut aussi savoir que la valeur entre parenthèses, dans notre exemple 0, correspond à l’état initial de notre composant.

Pour lire l’état, il suffit généralement de mettre entre crochets le nom de la variable d’état comme toute variable.

<p>L’état local est égal à : {state}</p>

Pour modifier l’état, il faut faire appel à la fonction setState comme ci-dessous.

setState(1)

Après l’appel de fonction, la variable d’état sera égale à 1.

Avant de passer à la suite, sachez qu’il est bien sur possible d’utiliser plusieurs variables d’état à l’intérieur d’un composant, il faudra bien sûr qu’elles ai des noms différents.

useEffect

UseEffect est, comme son nom l’indique, un hook d’effet. Il permet de déclencher une fonction lorsque l’état du composant change. Cela permet d’appliquer des effets de bord tel que modifier le DOM, changer le titre d’un document…

Si on analyse l’exemple ci-dessus, on remarque que useEffect prend deux paramètres, la fonction qui sera exécutée quand une dépendance du composant changera et ce même tableau de dépendance (vide dans notre exemple).

Sachez que même s’il est possible d’appeler une fonction en dehors de useEffect, je vous déconseille fortement de la faire. Je vous conseille aussi d’éviter d’abuser des tableaux de dépendance vide.

useContext

Avec React, les props sont des données que se passent les composants (du parent vers l’enfant). Mais certains types de donnée nécessitent d’être transmis à plusieurs composants, il peut alors être très rébarbatif et compliquer le développement et la maintenance de votre application. C’est pour simplifier la transmission de ces données globale qu’a était crée le hook useContext.

Avant de pouvoir utiliser useContext dans vos composants, il va déjà falloir créer « votre context ». C’est une fonction qui va se charger de traiter les données et de fournir un provider.

Comme vous pouvez le remarquer, on utilise createContext, une fonction qui permet de créer un context.

Ensuite, il va falloir englober les composants qui ont besoin de ces valeurs avec le provider crée ci-dessus.

Dans un premier temps, nous devons importer le hook, mais aussi le context. Ensuite, nous recouperons la valeur que nous retourne notre context, ici « value ».

Il ne nous reste plus qu’a utiliser notre valeur comme n’importe quelle autre variable.

J’aurais pu continuer la présentation plus précise d’autres hooks, mais ce n’est pas le but de cet article. Je vous ai présenté 3 hooks, mais sachez qu’il en existe encore plusieurs (useRef, useCallBack, useReducer …).

Avant de conclure, laissez-moi vous présenter une des forces des hooks et de react.

Les hooks personnalisé

Saviez vous que React vous donne la possibilité de créer vos propre hooks ?

En effet, créer vos hooks permet de reproduire une fonctionnalité d’un composant de manière réutilisable. Cela améliore donc la maintenance du code.

La création d’un hook se fait sous la forme de fonction, tout comme les hooks par défaut, il faudra ensuite les importer pour pouvoir les utiliser.

Conclusion

Le but de cet article était de vous présenter les hooks.

Comme dis ci-dessus, la liste des hooks est longue, si vous voulez creuser le sujet, je vous conseil la doc officielle qui est vraiment bien faite.

Avant de finir, je voudrais aussi vous rappeler que malgré le fait que les hooks soient utilisable uniquement avec les composants fonctionnels, l’utilisation des composants de classe reste pertinent. Effectivement, il existe une alternative pour chaque hook alors n’abandonnez pas votre projet fait en composant classe trop vite.