L'état local avec useState

Donnez de la mémoire à vos composants avec useState pour afficher des valeurs qui changent au fil des actions.

8 min · 3 questions

Un compteur de « J'aime », le texte tapé dans un champ de recherche, un menu ouvert ou fermé : toutes ces valeurs changent pendant que l'on utilise l'application. Une variable classique ne suffit pas, car React ne rafraîchit pas l'écran quand elle change. Il faut ce qu'on appelle un état (« state » en anglais) : une mémoire propre au composant. On le crée avec useState, un hook, c'est-à-dire une fonction spéciale fournie par React dont le nom commence par use.

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Compteur : {count}
    </button>
  );
}

Décortiquons la ligne clé : const [count, setCount] = useState(0);. useState(0) crée un état avec la valeur de départ 0 et retourne un tableau de deux éléments, que l'on récupère par déstructuration : count est la valeur actuelle, et setCount est la fonction de mise à jour, la seule façon autorisée de changer cette valeur. Ici, onClick déclenche setCount(count + 1) à chaque clic (nous verrons les événements en détail dans la prochaine leçon).

import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Bonjour, {name} !</p>
    </div>
  );
}

Quand vous appelez setName, React fait deux choses : il mémorise la nouvelle valeur, puis il ré-exécute votre fonction composant pour recalculer l'affichage. C'est ce qu'on appelle un nouveau rendu (« re-render »). Voilà pourquoi le paragraphe Bonjour, {name} ! se met à jour tout seul à chaque lettre tapée : vous décrivez le résultat, React s'occupe du reste.

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Que retourne l'appel useState(0) ?
   • Uniquement la valeur actuelle de l'état
   • Un tableau avec la valeur actuelle et sa fonction de mise à jour
   • Un objet contenant tous les états du composant
2. Quelle écriture est correcte pour augmenter le compteur ?
   • count = count + 1
   • useState(count + 1)
   • setCount(count + 1)
3. Que se passe-t-il quand on appelle la fonction de mise à jour d'un état ?
   • React ré-exécute le composant pour rafraîchir l'affichage
   • La page entière est rechargée dans le navigateur
   • Rien, il faut aussi rafraîchir manuellement la page