Comment fonctionne le hook `useState` ?

Question

Accepted Answer

`useState` donne à un composant fonction un morceau d'**état local, réactif**. Il retourne une paire : la **valeur actuelle** et une fonction **setter**. Appeler le setter planifie un re-rendu avec la nouvelle valeur.

```jsx
const [count, setCount] = useState(0); // 0 is the initial value
setCount(count + 1);   // value form
setCount(c => c + 1);  // functional form (preferred when based on previous)
```

## Deux choses qui surprennent les débutants

**1. Les mises à jour sont asynchrones / regroupées.** `count` ne change pas à la ligne après `setCount`; il a la nouvelle valeur lors du *prochain* rendu. Donc ceci n'incrémente qu'une seule fois:

```jsx
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
```

Utilisez le **functional updater** quand la valeur suivante dépend de la précédente, parce que React passe la dernière valeur:

```jsx
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
```

**2. La valeur initiale n'est utilisée que lors du premier rendu.** Pour une valeur par défaut coûteuse, passez une fonction pour qu'elle s'exécute une seule fois (lazy init):

```jsx
const [data] = useState(() => expensiveInit()); // runs once, not every render
```

## Pourquoi c'est important

L'état est ce qui rend un composant interactif — React réexécute la fonction et re-rend l'interface utilisateur chaque fois que l'état change.

Traitez l'état comme **immuable** : créez un nouveau tableau/objet au lieu de muter, par ex. `setItems([...items, x])`, sinon React pourrait ne pas détecter la modification.