Chapitre 6 — useEffect et appels API

🔌 useEffect et le cycle de vie

Le hook useEffect permet d''exécuter du code après le rendu : appels API, abonnements, timers, manipulation DOM...

1. Anatomie de useEffect

import { useEffect, useState } from 'react';

function Profil() {
const [user, setUser] = useState(null);

useEffect(() => {
// S''exécute après le rendu
fetch('/api/user/1')
.then(r => r.json())
.then(data => setUser(data));
}, []); // [] = exécuter UNE SEULE FOIS au montage

if (!user) return <p>Chargement...</p>;
return <h1>{user.nom}</h1>;
}

2. Tableau de dépendances

3. Cleanup (nettoyage)

useEffect(() => {
const timer = setInterval(() => console.log('tick'), 1000);
return () => clearInterval(timer); // cleanup au démontage
}, []);

4. Pièges fréquents

⚠️ Boucle infinie : ne jamais setState sans dépendance contrôlée. ⚠️ Race condition sur les fetch : utiliser un flag isMounted ou AbortController.

5. Vers les next steps

Avec ces 6 chapitres vous avez les bases solides de React. Pour aller plus loin :

• React Router : navigation entre pages
• Context API : partage de state global
• Hooks personnalisés : logique réutilisable
• Next.js (cours suivant ITAG Tech)