Tutoriel React — Chapitre 9

Plan du chapitre

• 1) Qu’est-ce que le state ?
• 2) Le hook useState
• 3) Exemple : un compteur
• 4) Mettre à jour le state correctement
• 5) State avec objets et tableaux
• 6) Affichage conditionnel avec le state
• 7) Erreurs fréquentes
• 8) Résumé
• 9) Exercice pratique

1) Qu’est-ce que le state ?

Le state représente des données internes à un composant. Quand le state change, React ré-affiche automatiquement l’interface.

Exemple concret : un compteur. Le nombre affiché dépend du state. Quand on clique sur un bouton, le state change, et l’écran se met à jour.

2) Le hook useState

React fournit des hooks pour gérer des fonctionnalités. Le hook de base pour le state s’appelle useState.

import { useState } from "react";

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

• count : la valeur actuelle
• setCount : la fonction pour modifier la valeur
• 0 : la valeur initiale

3) Exemple : un compteur

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

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

À chaque clic sur le bouton, le compteur augmente et l’affichage se met à jour.

4) Mettre à jour le state correctement

Le state ne doit jamais être modifié directement.

Mauvaise pratique

count = count + 1; // interdit

Bonne pratique

setCount(count + 1);

Forme “fonction” (plus sûre)

setCount((prev) => prev + 1);

Cette forme est recommandée quand la nouvelle valeur dépend de l’ancienne.

5) State avec objets et tableaux

Objet

const [user, setUser] = useState({ name: "Alice", age: 30 });

setUser({ ...user, age: 31 });

Tableau

const [items, setItems] = useState(["A", "B"]);

setItems([...items, "C"]);

6) Affichage conditionnel avec le state

const [isVisible, setIsVisible] = useState(true);

{isVisible && <p>Je suis visible</p>}

Le contenu s’affiche uniquement si isVisible vaut true.

7) Erreurs fréquentes

8) Résumé

• Le state rend l’interface dynamique
• useState est le hook de base
• On met à jour le state avec setState
• Le state peut être un nombre, un objet ou un tableau

9) Exercice pratique

Créez un composant avec :

• Un compteur (+ / -)
• Un bouton pour afficher / cacher un texte
• Un tableau de prénoms ajouté dynamiquement