Gestion de l'État avec useState

Le hook useState est un hook fondamental de React qui permet aux composants fonctionnels de disposer d’un état. Il offre un moyen de déclarer et de mettre à jour des variables d’état au sein d’un composant.

Syntaxe :

Pour utiliser le hook useState, il suffit de l’appeler et de lui passer l’état initial (initialState) en argument. Il retourne un tableau contenant deux éléments : la valeur actuelle de l’état (state) et une fonction (setState) permettant de mettre à jour cet état.

const [state, setState] = useState(initialState);

• Il est possible de choisir n’importe quel nom pour la variable state. Il est recommandé d’utiliser un nom de variable qui décrit précisément l’état stocké ou mis à jour, comme inputValue, page, number, name, etc. ;

• De même, lors de l’utilisation de la fonction setState, le choix du nom de la fonction est flexible. Cependant, il est d’usage de suivre une convention : le nom de la fonction setState doit commencer par "set" suivi du nom de la variable state correspondante. Par exemple, si la variable mail est setState, la fonction associée sera généralement nommée setMail.

Exemple 1 :

Création du composant Counter, qui maintient son propre état. Lorsque le bouton Increment est cliqué, l'état est mis à jour et le composant est re-rendu.

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

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 permet de mettre à jour la variable count à chaque clic sur le bouton.

Explication ligne par ligne :

• Ligne 1 : Importation du hook useState depuis la bibliothèque React pour utiliser sa fonctionnalité ;
• Ligne 3 : Définition du composant Counter en utilisant la syntaxe fonctionnelle conventionnelle ;
• Ligne 4 : Initialisation de l'état avec le hook useState ;

1. count représente la valeur du compteur. Sa valeur initiale est 0, spécifiée dans les parenthèses de useState(0) ;
2. setCount est la fonction qui permet de mettre à jour l'état si 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, la fonction setCount est utilisée pour mettre à jour l'état ;
• Lignes 10-15 : Affichage du 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, la fonction increment est passée.

Code complet de l'application :

Exemple 2 :

Construisons le composant Form avec son état indépendant. Nous demandons à l'utilisateur de saisir son nom dans le champ de saisie, et selon sa saisie, nous modifierons le contenu affiché.

import React, { useState } from "react";

const Form = () => {
  const [userName, setUserName] = useState("");

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setUserName(inputValue);
  };

  return (
    <div>
      <input
        type="text"
        value={userName}
        onChange={handleChange}
        placeholder="Your name"
      />
      <p>Hello, {userName}!</p>
    </div>
  );
};

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 cela est nécessaire.

Explication ligne par ligne :

• Ligne 1 : Importation du hook useState depuis la bibliothèque React pour utiliser sa fonctionnalité ;
• Ligne 3 : Définition du composant Form en utilisant la syntaxe standard de fonction ;
• Ligne 4 : Initialisation de l'état avec le hook useState ;

1. userName représente la valeur du champ de saisie, initialement définie comme une chaîne vide (""), spécifiée dans les parenthèses de useState("") ;
2. setUserName est la fonction qui 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 saisit quelque chose dans le champ. Nous récupérons la valeur saisie dans la fonction à l'aide de 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 attribuons userName comme valeur initiale pour le champ de saisie via l'attribut value ;
2. À la ligne 16, nous utilisons l'attribut onChange pour spécifier la fonction à appeler lorsqu'il y a une modification dans le champ de saisie.

Code complet de l'application :