📘 Chapitre – Gérer l’état avec `useState`

1. 🎯 Objectif pédagogique

Apprendre à utiliser le hook useState pour gérer l’état local d’un composant React et rendre l’interface dynamique.

2. 📚 Concepts abordés

Notion d’état local d’un composant
Hook useState() et sa syntaxe
Mise à jour de l’état avec la fonction setState
Rendu dynamique en fonction de l’état
Bonne pratique : ne jamais modifier l’état directement

3. 🧠 Explication théorique

L’état local est une variable spécifique à un composant qui peut évoluer au cours de la vie de ce composant. useState retourne un tableau de deux éléments :

const [valeur, setValeur] = useState(valeurInitiale);

valeur : la valeur actuelle de l’état.
setValeur : une fonction pour mettre à jour cette valeur.

Exemple : compteur

const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1)}>Incrémenter</button>

Chaque clic mettra à jour la valeur count.

4. 🛠 Tutoriel pratique

Résumé du travail : Créer un composant compteur qui utilise useState.

Arborescence projet :

react-demo/
 ├── src/
 │   ├── App.jsx
 │   └── Compteur.jsx

Étape 1 : Créer `Compteur.jsx`

import { useState } from 'react';

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

  return (
    <div>
      <p>Valeur du compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(0)}>Réinitialiser</button>
    </div>
  );
}

export default Compteur;

Étape 2 : Importer dans `App.jsx`

import Compteur from './Compteur';

function App() {
  return (
    <div>
      <h1>Gestion de l’état avec React</h1>
      <Compteur />
    </div>
  );
}

export default App;

Étape 3 : Tester

Lancer :

npm run dev

Puis interagir avec le compteur.

Étape 4 : Ajouter une valeur initiale dynamique

const [count, setCount] = useState(() => Math.floor(Math.random() * 10));

5. 🧾 Résumé et points-clés

useState() permet de gérer l’état local d’un composant fonctionnel.
La valeur et la fonction setValeur sont liées : modifier l’état déclenche un nouveau rendu.
Ne jamais modifier directement une variable d’état (ex : count++ interdit).
Chaque composant peut avoir plusieurs états :

const [nom, setNom] = useState("Alice");
const [age, setAge] = useState(25);

📘 Chapitre – Gérer l’état avec useState