# State

## Le State (État)

Le state est la mémoire locale d'un composant. Contrairement aux props, il peut changer dans le temps. Chaque mise à jour du state déclenche un re-render du composant.

### useState — déclaration

```
import { useState } from 'react';

function Compteur() {
  const [count, setCount] = useState(0); // valeur initiale = 0

  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}
```

### Mise à jour fonctionnelle

Quand le nouvel état dépend de l'ancien, toujours utiliser la forme fonctionnelle :

```
// ❌ Peut être stale dans certains cas
setCount(count + 1);

// ✅ Toujours sûr
setCount(prev => prev + 1);
```

### State avec objets

```
const [user, setUser] = useState({ nom: "Hugo", age: 25 });

// ✅ Toujours créer un nouvel objet (immuabilité)
setUser(prev => ({ ...prev, age: 26 }));
```

### Plusieurs états

```
const [nom, setNom] = useState("");
const [email, setEmail] = useState("");
const [loading, setLoading] = useState(false);
```

### State vs Props

<table id="bkmrk-stateprops-interne-a"> <thead><tr><th>State</th><th>Props</th></tr></thead> <tbody> <tr><td>Interne au composant</td><td>Vient du parent</td></tr> <tr><td>Modifiable</td><td>En lecture seule</td></tr> <tr><td>Déclenche un re-render</td><td>Déclenche un re-render</td></tr> </tbody></table>