1Définition

Un effet (useEffect) synchronise un composant avec quelque chose d'extérieur : minuterie, requête, abonnement. Il s'exécute après l'affichage, se relance quand ses dépendances changent, et renvoie un nettoyage appelé avant chaque relance et à la disparition du composant.

2Principes fondamentaux

3Exemples pratiques

1useEffect(() => {2  const surTaille = () => setLargeur(window.innerWidth);3  window.addEventListener("resize", surTaille);4  return () => window.removeEventListener("resize", surTaille);5}, []);

1const { data, isPending, error } = useQuery({2  queryKey: ["lecons"],3  queryFn: chargerLecons,4});

4Erreurs courantes

useEffect(() => { setInterval(…) }, [actif]);

return () => clearInterval(id);

useEffect(() => { charger(); });

useEffect(() => { charger(); }, []);

useEffect(() => setTotal(somme(panier)), [panier]);

const total = somme(panier);

5Subtilités à connaître

• ◆En développement, React monte, démonte puis remonte chaque composant : un nettoyage incorrect se voit immédiatement.
• ◆Une promesse ne s'annule pas, mais sa réponse peut être ignorée ; AbortController peut, lui, annuler une requête fetch.
• ◆Beaucoup d'effets sont évitables : « You Might Not Need an Effect » est une lecture recommandée de la documentation React.

6Vérifie ta compréhension