Hook useState

Le hook useState est un hook fondamental de React qui permet aux composants fonctionnels d'avoir un état. Il fournit un moyen de déclarer et de mettre à jour les variables d'état au sein d'un composant.

Syntaxe :

Pour utiliser le hook useState, nous l'appelons et passons l'état initial (initialState) en tant qu'argument. Il renvoie un tableau avec deux éléments : la valeur actuelle de l'état (state) et une fonction (setState) pour mettre à jour l'état.

• Nous pouvons choisir n'importe quel mot comme nom pour une variable state. Il est recommandé d'utiliser un nom de variable qui décrit précisément quel état est stocké ou mis à jour, tel que inputValue, page, number, name, etc. ;

• De même, lors de l'utilisation de la fonction setState, nous avons la flexibilité de choisir le nom de la fonction. Cependant, suivre un modèle spécifique est une convention standard : le nom de la fonction setState doit commencer par "set" suivi du nom de la variable d'état correspondante. Par exemple, si la variable state est mail, la fonction setState correspondante serait généralement nommée setMail.

Note

Lorsque nous appelons setState, React re-render le composant et met à jour l'état avec la nouvelle valeur. Il est important de noter que lors de l'utilisation de useState, la variable d'état n'a pas besoin d'être un objet. Elle peut être une valeur primitive (comme un nombre, une chaîne ou un booléen) ou une valeur complexe (comme un tableau ou un objet).

Exemple 1 :

Construisons le composant Counter, qui maintiendra son propre état. Lorsque le bouton Increment est cliqué, nous mettrons à jour l'état et déclencherons un re-render du composant.

Dans cet exemple, le hook useState est utilisé pour déclarer une variable d'état count avec une valeur initiale de 0. La fonction setCount est utilisée pour mettre à jour la variable count chaque fois que le bouton est cliqué.

Explication ligne par ligne :

• Ligne 1 : Nous importons le hook useState de la bibliothèque React pour utiliser sa fonctionnalité ;
• Ligne 3 : Nous définissons le composant Counter en utilisant la syntaxe de fonction conventionnelle ;
• Ligne 4 : Nous initialisons l'état en utilisant le hook useState ;
  1. count représente la valeur du compteur. Sa valeur initiale est 0, spécifiée entre les parenthèses de useState(0) ;
  2. setCount est la fonction qui met à jour l'état lorsque nécessaire.
• Lignes 6-8 : Cette fonction fléchée JavaScript gère la logique de mise à jour de l'état. Elle est exécutée lorsque le bouton "increment" est cliqué. À l'intérieur de la fonction, nous utilisons la fonction setCount pour mettre à jour l'état ;
• Lignes 10-15 : rend le balisage du composant. À la ligne 12, la valeur actuelle de l'état (count) est affichée. Le bouton à la ligne 13 utilise l'attribut onClick pour définir la fonction à exécuter lors du clic. Dans ce cas, nous passons la fonction increment.

Code complet de l'application :

Exemple 2 :

Construisons le composant Form avec son état indépendant. Nous demandons à l'utilisateur d'entrer son nom dans le champ de saisie, et en fonction de son entrée, nous modifierons le contenu affiché.

Dans cet exemple, le hook useState est utilisé pour déclarer une variable d'état userName avec une valeur initiale de chaîne vide. La fonction setUserName met à jour la variable userName chaque fois que nous en avons besoin.

Explication ligne par ligne :

• Ligne 1 : Nous importons le hook useState de la bibliothèque React pour utiliser sa fonctionnalité ;
• Ligne 3 : Nous définissons le composant Form en utilisant la syntaxe standard de fonction ;
• Ligne 4 : Nous définissons l'état initial en utilisant le hook useState ;
  1. userName représente la valeur du champ de saisie, initialement définie comme une chaîne vide (""), spécifiée entre les parenthèses de useState("") ;
  2. setUserName est la fonction qui nous permet de mettre à jour l'état lorsque cela est nécessaire.
• Lignes 6-9 : Cette fonction fléchée JavaScript gère la logique de mise à jour de l'état. Elle est déclenchée lorsqu'un utilisateur tape quelque chose dans le champ. Nous récupérons la valeur de saisie dans la fonction en utilisant event.target.value. Nous utilisons ensuite la fonction setUserName pour mettre à jour l'état avec la valeur du champ de saisie ;
• Lignes 11-21 : Le balisage du composant est rendu.
  1. À la ligne 15, nous assignons userName comme valeur initiale pour le champ de saisie en utilisant l'attribut value ;
  2. À la ligne 16, nous utilisons l'attribut onChange pour spécifier la fonction à appeler lorsqu'il y a un changement dans la saisie.

Code complet de l'application :