C'est quoi un hook ?
Pour faire simple, dans l'univers React, un hook c'est une fonction qui te permet de réutiliser une logique dans tes différents composants. Par logique, j'entends une tâche ou un ensemble de tâches que tu peux avoir besoin de réaliser dans tes composants : cela peut être envoyer une requête au serveur pour obtenir des données, sélectionner une image dans un formulaire ou même gérer une fonctionnalité de toggling (comme par exemple montrer-cacher quelque chose sur ton écran), ...
React vient avec quelques hooks par défaut et dès qu'on les a maîtrisés, faire du React devient aussi beau qu'une aventure amoureuse avec la fille (on le garçon) de ses rêves. Les hooks commencent tous par use-.
L'un des hooks les plus importants, et le plus basique de tous, c'est le hook useState. Ce hook permet de gérer les states au sein d'une application.
C'est quoi une state ?
Bon, j'hésite sur le genre (un state ou une state) mais peu importe, c'est pas un cours de français. Pour faire simple, encore une fois, une state c'est une donnée dont votre composant a besoin pour fonctionner. Si cette donnée change, l'état de votre composant change aussi.
Dit comme ça, je sais que cela semble vague. Je vous propose donc un petit exemple d'illustration. Pour le moment, n'essayez pas de tout comprendre. Concentrez-vous sur les parties que je vous demanderai de voir.
On va supposer qu'on a un composant qui affiche un champ (input) dans lequel on saisit du texte. Au fur et à mesure que l'on saisit du texte, ce texte doit s'afficher juste en bas.
jsxComme on peut le déduire de l'explication que je venais de donner, l'état et l'apparence du composant dépend de ce que l'on va taper dans le champ input. Dans une situation comme celle-ci, on a besoin d'utiliser un useState.
Comment utiliser useState ?
Rien n'est aussi simple que d'utiliser une state dans son composant. On va continuer avec notre exemple précédent pour voir comment l'utiliser afin d'afficher le texte.
Voici comment fonctionne ce hook :
- Vous l'appelez comme une fonction normale au sein de votre composant (pas dehors), vous lui passez une donnée par défaut du même type que la donnée que vous voulez stocker dans votre state c'est-à-dire si vous voulez stocker une chaîne de caractères dans votre state, vous allez passer une chaîne vide comme valeur par défaut. Si c'est un nombre, vous pouvez passer 0 ou n'importe quel nombre qui constitue le defaut pour vous. Si c'est une liste, vous passez une liste vide, ... Vous pouvez aussi passer undefined ou null (mais c'est très risqué quand tu es débutant). Elle vous retourne une liste.
- Cette liste retournée comporte deux éléments : le premier élément c'est la state (proprement dite) qui représente votre donnée et qui a le même type que la valeur par défaut. Le deuxième élément est une fonction qui vous permet de mettre-à-jour votre state. Quand vous mettez à jour une state, le premier élément représentera automatiquement la donnée actuelle et cela se reflétera sur votre composant.
- Avec ces deux éléments, vous pouvez opérer de la magie.
jsxDans cet example : j'appelle useState et lui passe une chaîne vide (parce que je veux qu'elle stocke du texte). J'utilise le premier élément pour afficher le texte et le deuxième élément pour mettre à jour le texte au fur et à mesure que l'utilisateur écrit dans le champ (d'où l'événement onChange).
A chaque fois que l'utilisateur écrira une lettre, ou effacera, la valeur sera directement récupérée (event.target.value). Je la passerai à la fonction retournée par useState pour mettre à jour le texte affiché.
Notes de conclusion
Il faut garder à l'esprit les quelques remarques suivantes :
- Une hook ne doit pas s'appeller en dehors d'un composant, dans une structure conditionnelle, une boucle ou une autre fonction. Elle doit s'appeler au sein du composant, au dessus du return.
- Chaque fois qu'une state change, tous les composants qui dépendent d'elles sont re-rendus. C'est un peu difficile à comprendre mais voyez ça un peu comme si l'ordinateur dessinait le composant sur votre écran. Quand vous mettez à jour le texte, votre ordinateur va prendre le texte qui est à jour, puis redessine tout le composant pour qu'il soit visible.
Dans un prochain article, nous verrons comment mettre à jour des states qui stockent des listes, des objets ou même des listes d'objets ou des objets contenant des listes.
Je vous dis à la prochaine, avec la documentation officielle de React et ce morceau de Mbilia Bel que j'écoute en boucle depuis quelques jours.
