Le hook d'état fait parti des hooks de React que l'on va utiliser régulièrement puisqu'il permet de générer un état local (state) de son composant de fonction. Là où l'on a besoin de this.state dans un composant de classe, nous allons avoir besoin du hook d'état : useState pour un composant de fonction.
Dans un composant de class, nous gérons le state au niveau du this de la classe.
Dans cet exemple, nous avons donc un objet qui contient un état avec 2 clés. Si nous devions le représenter avec un composant de fonction, nous ferions comme ceci :
Comme on a pu le constater sur l'exemple ci-dessus, useState est une fonction qui prend un paramètre : la valeur de l'état que l'on souhaite définir. Pour le compteur, je souhaite le démarrer à 0.
En retour, la fonction useState nous donne un tableau qui contient 2 éléments :
Le style d'écriture que l'on vient de voir concerne l'affectation par décomposition. Nous pourrions aussi avoir :
Dès lors, vous pouvez maintenant utiliser votre état dans votre composant comme l'afficher et le modifier :
Vous aurez constatez que le mot-clé use revient régulièrement lorsque vous utilisez un hook. C'est une norme. On utilise (use) une information, on ne l'a crée pas.
Comme nous gérons un état local (state), la modification de celui-ci entraine évidemment le cycle de vie de mise à jour de React