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 qui décrit précisément la donnée stockée ou modifiée, comme inputValue, page, number, name, etc. ;

• De même, pour la fonction setState, le choix du nom 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. Par exemple, si la variable d’état state est mail, la fonction setState correspondante serait 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 réaffiché.

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 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, 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.

Exemple 2 :

Création du composant Form avec son état indépendant. L'utilisateur est invité à saisir son nom dans le champ de saisie, et selon son entrée, le contenu affiché sera modifié.

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 lorsque 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 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. La valeur saisie est récupérée dans la fonction via event.target.value. On utilise ensuite la fonction setUserName pour mettre à jour l’état avec la valeur du champ de saisie ;
• Lignes 11-21 : Le balisage du composant est affiché.

1. À la ligne 15, on assigne userName comme valeur initiale de l’input via l’attribut value ;
2. À la ligne 16, on utilise l’attribut onChange pour spécifier la fonction à appeler lors d’un changement dans le champ de saisie.