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 en lui passant 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 d’état state. Il est recommandé d’utiliser un nom de variable qui décrit précisément la donnée stockée ou modifiée, 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 d’état correspondante (state). Pour exemple, si la variable d’état est mail, la fonction setState correspondante serait généralement nommée setMail.

Exemple 1 :

Créons le composant Counter, qui maintiendra son propre état. Lorsque le bouton Increment est cliqué, nous mettrons à jour l'état et déclencherons un nouveau rendu du composant.

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 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 depuis la bibliothèque React pour utiliser sa fonctionnalité ;
• Ligne 3 : Nous définissons le composant Counter en utilisant la syntaxe fonctionnelle 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 dans les parenthèses de useState(0) ;
2. setCount est la fonction qui met à jour l'état lorsque cela est 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 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 avec 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 :