Le state (état) est un objet JavaScript local et mutable qui stocke les données dynamiques d’un composant.
Sa particularité fondamentale : toute modification déclenche automatiquement un nouveau rendu du composant (et de ses enfants si nécessaire), synchronisant ainsi l’interface utilisateur avec les données.
Caractéristiques essentielles
| Critère | Détail |
|---|---|
| Portée | Strictement local au composant (sauf partage explicite via props/contexte) |
| Mutabilité | Jamais modifié directement → uniquement via des fonctions dédiées (setState, setX) |
| Cycle de vie | Persiste entre les rendus, mais est détruit au démontage du composant |
| Déclencheur de rendu | Oui (contrairement aux ref ou variables locales) |
| Initialisation | Défini à la création du composant (valeur initiale obligatoire) |
Exemple simple
import { useState } from 'react';
function MessageToggle() {
// Déclare un état booléen "visible" (départ : false)
const [visible, setVisible] = useState(false);
return (
<div>
<button onClick={() => setVisible(!visible)}>
{visible ? 'Masquer' : 'Afficher'} le message
</button>
{visible && <p>Bonjour ! Voici un message secret.</p>}
</div>
);
}Ce qui se passe :
| Action | État visible | Rendu |
|---|---|---|
| Au chargement | false | Bouton « Afficher le message » + pas de message |
| Clic sur le bouton | Devient true | Bouton « Masquer le message » + message visible |
| Nouveau clic | Devient false | Bouton « Afficher le message » + message caché |
State vs autres concepts React
| Concept | Modifiable ? | Déclenche un rendu ? | Usage typique |
|---|---|---|---|
| state | Via fonction dédiée | Oui | Données dynamiques internes au composant |
| props | Lecture seule | Non (mais reçoit mises à jour du parent) | Données transmises par le composant parent |
| ref (useRef) | Directement | Non | Valeurs persistantes sans impact UI (timers, DOM) |
| Variable locale | Oui | Non | Données temporaires n’impactant pas l’UI |