Chapitre 4 — State et useState

🔄 Le State (état du composant)

Le state permet de stocker des données qui changent au cours du temps (cliquer sur un bouton, taper dans un input, recevoir une réponse API...). Sans state, votre application est figée.

1. Le hook useState

import { useState } from 'react';

function Compteur() {
const [count, setCount] = useState(0);
return (
<div>
<p>Compteur : {count}</p>
<button onClick={() => setCount(count + 1)}>
Incrémenter
</button>
</div>
);
}

2. Anatomie de useState

• useState(initialValue) retourne un tableau de 2 éléments
• 1er élément : la valeur actuelle du state
• 2e élément : fonction setter pour modifier le state
• Conventions : [name, setName], [count, setCount]

3. Mises à jour basées sur la valeur précédente

⚠️ Pour modifier en se basant sur l''ancienne valeur, utilisez la fonction de mise à jour :

// ❌ Risqué (bug si plusieurs setCount d''affilée)
setCount(count + 1);

// ✅ Sûr
setCount(prev => prev + 1);

4. State avec un objet

const [user, setUser] = useState({nom: '', age: 0});
setUser({...user, nom: 'Aminata'}); // Spread pour préserver les autres champs