Hooks fondamentaux

useState et useEffect pour la réactivité

Section 1

useState — état local

Step 1

Déclarer et mettre à jour l'état

useState retourne une paire : la valeur actuelle et une fonction de mise à jour. Quand on appelle la fonction de mise à jour, React re-rend le composant.

snippet.jsx

jsx

1import { useState } from "react";
2
3function Counter() {
4  const [count, setCount] = useState(0); // valeur initiale : 0
5
6  return (
7    <div>
8      <p>Compteur : {count}</p>
9      <button onClick={() => setCount(count + 1)}>+1</button>
10      <button onClick={() => setCount(count - 1)}>-1</button>
11      <button onClick={() => setCount(0)}>Reset</button>
12    </div>
13  );
14}
15
16// État avec objet
17function LoginForm() {
18  const [form, setForm] = useState({ email: "", password: "" });
19
20  const handleChange = (e) => {
21    setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
22  };
23}

Step 2

Mise à jour fonctionnelle

Quand la nouvelle valeur dépend de l'ancienne, utilise la forme fonctionnelle de setState. Ça évite les bugs de closure stale.

snippet.jsx

jsx

1import { useState } from "react";
2
3function Counter() {
4  const [count, setCount] = useState(0); // valeur initiale : 0
5
6  return (
7    <div>
8      <p>Compteur : {count}</p>
9      <button onClick={() => setCount(count + 1)}>+1</button>
10      <button onClick={() => setCount(count - 1)}>-1</button>
11      <button onClick={() => setCount(0)}>Reset</button>
12    </div>
13  );
14}
15
16// État avec objet
17function LoginForm() {
18  const [form, setForm] = useState({ email: "", password: "" });
19
20  const handleChange = (e) => {
21    setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
22  };
23}

Section 2

useEffect — effets de bord

Step 3

Fetch de données avec useEffect

useEffect est exécuté après le rendu. Le tableau de dépendances contrôle quand l'effet se re-exécute.

snippet.jsx

jsx

1import { useState } from "react";
2
3function Counter() {
4  const [count, setCount] = useState(0); // valeur initiale : 0
5
6  return (
7    <div>
8      <p>Compteur : {count}</p>
9      <button onClick={() => setCount(count + 1)}>+1</button>
10      <button onClick={() => setCount(count - 1)}>-1</button>
11      <button onClick={() => setCount(0)}>Reset</button>
12    </div>
13  );
14}
15
16// État avec objet
17function LoginForm() {
18  const [form, setForm] = useState({ email: "", password: "" });
19
20  const handleChange = (e) => {
21    setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
22  };
23}

Topics and skills covered

React Hooks
useState
useEffect
Side effects

JSX et composants

Ch.1