useEffect est un hook fondamental de React (introduit en v16.8) qui permet d’exécuter des effets de bord (side effects) dans les composants fonctionnels.
Un effet de bord désigne toute opération qui interagit avec le monde extérieur au processus de rendu React :
Appels API, abonnements, modification manuelle du DOM, timers, analytics, etc.
Il synchronise le composant avec des systèmes externes après le rendu, en respectant le cycle de vie de React.
Cas d’usage courants
| Scénario | Exemple de code |
|---|---|
| Appel API | useEffect(() => { fetch(‘/api/data’).then(…); }, []); |
| Écouteur d’événement | useEffect(() => { window.addEventListener(‘resize’, handler); return () => window.removeEventListener(‘resize’, handler); }, []); |
| Nettoyage de timer | useEffect(() => { const id = setInterval(…); return () => clearInterval(id); }, []); |
| Analytics | useEffect(() => { trackPageView(location.pathname); }, [location.pathname]); |