1Définition

L'état (useState) est une valeur qui survit aux rendus ; la remplacer avec son setter déclenche un nouveau rendu. On garde l'état minimal, on calcule le reste, et l'on ne le modifie jamais : on le remplace par une nouvelle valeur.

2Principes fondamentaux

3Exemples pratiques

1setPanier((p) => p.filter((a) => a.id !== id));2setTaches((t) => t.map((x) => (x.id === id ? { ...x, faite: true } : x)));

1setN((n) => n + 1);2setN((n) => n + 1);   // +2 au total

4Erreurs courantes

let gemmes = 0; … gemmes += 10;

const [gemmes, setGemmes] = useState(0);

panier.push(a); setPanier(panier);

setPanier((p) => [...p, a]);

onClick={choisir(r)}

onClick={() => choisir(r)}

5Subtilités à connaître

• ◆L'état est une photo prise au rendu : juste après setN(5), n vaut encore l'ancienne valeur dans le même gestionnaire.
• ◆React regroupe les mises à jour d'un même événement en un seul rendu.
• ◆Un état dérivé (le total d'un panier) stocké à part finit toujours par se désynchroniser.

6Vérifie ta compréhension