Le hook `useState` : Introduction et utilisation

Ajouter de l'état aux fonctions : La révolution `useState`

Comme nous l'avons mentionné, les composants fonctionnels, bien que modernes et privilégiés, étaient historiquement "stateless". L'introduction des Hooks a changé cela, et le Hook le plus fondamental pour gérer l'état local est `useState`. Il permet à vos composants fonctionnels de conserver et de mettre à jour leur propre état interne, les rendant tout aussi capables que les composants classe en matière de gestion de données dynamiques.

`useState` est une fonction fournie par React qui vous permet de "brancher" la fonctionnalité d'état de React directement dans votre composant fonction. C'est le pilier de la gestion d'état locale dans l'écosystème React moderne.

Importation et Syntaxe de base

Pour utiliser `useState`, vous devez d'abord l'importer depuis le paquet React :

import React, { useState } from 'react';

Ensuite, à l'intérieur de votre composant fonctionnel (et uniquement au niveau supérieur, jamais dans des boucles, conditions ou fonctions imbriquées - c'est une règle des Hooks), vous appelez `useState` en lui passant la valeur initiale de l'état que vous souhaitez créer. L'appel à `useState` retourne un tableau contenant exactement deux éléments :

1. La valeur actuelle de l'état.
2. Une fonction qui vous permet de mettre à jour cette valeur d'état.

La convention est d'utiliser la déstructuration de tableau pour récupérer ces deux éléments :

function MonComposant() {
  // Appel de useState avec la valeur initiale (ex: 0)
  // Déstructuration du tableau retourné
  const [etatActuel, setEtat] = useState(valeurInitiale);

  // 'etatActuel' contient la valeur courante de l'état
  // 'setEtat' est la fonction pour modifier l'état
  
  // ... reste du composant
}

Par convention, le nom de la fonction de mise à jour est souvent le nom de la variable d'état préfixé par "set" (par exemple, `count` et `setCount`, `name` et `setName`).

Exemple concret : Un compteur simple

Voyons comment utiliser `useState` pour créer un composant compteur simple :

import React, { useState } from 'react';

function Compteur() {
  // 1. Déclaration de l'état 'count' avec valeur initiale 0
  //    useState(0) retourne [0, fonctionDeMiseAJour]
  const [count, setCount] = useState(0);

  // Fonction appelée au clic sur le bouton
  const incrementer = () => {
    // 3. Appel de la fonction de mise à jour pour changer l'état
    setCount(count + 1); 
    // NE JAMAIS FAIRE : count = count + 1; (ne déclenche pas de re-rendu)
  };

  return (
    

      {/* 2. Lecture de la valeur actuelle de l'état */}
      
Le compteur est à : {count}
      Incrémenter
    
  );
}

export default Compteur;

Décortiquons ce qui se passe :

1. Initialisation : Au premier rendu, `useState(0)` est appelé. Il initialise l'état `count` à `0` et retourne `[0, setCount]`.
2. Rendu initial : Le JSX est rendu, affichant "Le compteur est à : 0".
3. Interaction : L'utilisateur clique sur le bouton. La fonction `incrementer` est appelée.
4. Mise à jour de l'état : `setCount(count + 1)` est exécuté. Actuellement, `count` vaut 0, donc `setCount(1)` est appelé. Ceci informe React que l'état `count` doit devenir `1`.
5. Re-rendu : React, ayant détecté un changement d'état via `setCount`, déclenche un nouveau rendu du composant `Compteur`.
6. Nouvel appel à `useState` : Lors du re-rendu, `useState(0)` est appelé à nouveau, mais cette fois, React sait que cet état existe déjà et il retourne la valeur actuelle (`1`) et la même fonction `setCount`. Donc, `[count, setCount]` devient `[1, setCount]`.
7. Nouveau rendu JSX : Le JSX est rendu avec la nouvelle valeur de `count`, affichant "Le compteur est à : 1".

Principes clés de `useState`

• Ne jamais modifier l'état directement : Utilisez toujours la fonction de mise à jour fournie (`setEtat`). Modifier directement la variable d'état (etatActuel = ...) ne fonctionnera pas car React ne sera pas notifié du changement et ne déclenchera pas de re-rendu.
• Les mises à jour d'état sont asynchrones (en général) : Lorsque vous appelez `setEtat`, React ne met pas immédiatement à jour la variable d'état et ne relance pas le rendu instantanément. Il peut regrouper plusieurs mises à jour d'état pour des raisons de performance. Ne vous fiez donc pas à la valeur de l'état immédiatement après avoir appelé `setEtat` dans la même fonction.
• Conservation de l'état : React préserve la valeur de l'état entre les différents rendus du même composant. L'état est lié à l'instance spécifique du composant dans l'arbre React.
• Appels multiples à `useState` : Vous pouvez (et devriez souvent) appeler `useState` plusieurs fois dans un même composant pour gérer différentes pièces d'état indépendantes.

function FormulaireSimple() {
  const [nom, setNom] = useState('');
  const [email, setEmail] = useState('');
  // ...
}

Conclusion : La porte d'entrée vers l'état fonctionnel

Le Hook `useState` est l'outil fondamental pour introduire et gérer l'état local dans les composants fonctionnels React. Sa syntaxe, basée sur la déstructuration de tableau (`const [valeur, setValeur] = useState(initial);`), permet de déclarer une variable d'état et d'obtenir une fonction pour la mettre à jour.

En utilisant la fonction de mise à jour, vous informez React des changements, ce qui déclenche les re-rendus nécessaires pour maintenir l'interface utilisateur synchronisée avec l'état. C'est la base de la création de composants interactifs et dynamiques dans l'approche moderne de React.