Bases de useEffect : dépendances et nettoyage
Exécutez des effets secondaires après le rendu, contrôlez leur réexécution avec le tableau de dépendances et renvoyez une fonction de nettoyage pour éviter les fuites de mémoire.
Bases de useEffect : dépendances et nettoyage est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu’est-ce que useEffect ?
useEffect exécute un effet secondaire après le rendu de React. Les effets secondaires comprennent la récupération de données, l’abonnement à des événements, la configuration de minuteurs et l’interaction avec des API externes. Les effets s’exécutent après l’affichage, et non pendant le rendu.
Syntaxe de base
useEffect(effect, deps?). Par défaut, la fonction d’effet s’exécute après chaque rendu. Fournissez un tableau de dépendances pour contrôler le moment où elle s’exécute.
import { useEffect } from 'react';
function Component() {
useEffect(() => {
console.log('Ran after every render');
});
}Le tableau de dépendances contrôle le déclenchement de l’effet
Tableau vide [] : exécution une seule fois après le montage. Tableau non vide [a, b] : exécution lorsque a ou b change. Aucun tableau : exécution après chaque rendu (ce que vous souhaitez rarement).
// Run once on mount:
useEffect(() => {
fetchInitialData();
}, []);
// Run when userId changes:
useEffect(() => {
fetchUser(userId);
}, [userId]);
// Run after every render (usually a bug):
useEffect(() => {
trackPageView();
});La fonction de nettoyage
Retournez une fonction depuis useEffect pour effectuer le nettoyage : supprimer les écouteurs d’événements, annuler les abonnements et effacer les minuteurs. Le nettoyage s’exécute avant l’effet suivant et lors du démontage.
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
// Cleanup: remove listener when effect re-runs or component unmounts
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);Fermetures obsolètes dans les dépendances
Les effets capturent les valeurs auxquelles ils font référence au moment de leur création. Si vous lisez une valeur d’état ou de propriété dans un effet sans l’indiquer dans les dépendances, vous verrez une valeur obsolète. La règle exhaustive-deps d’ESLint détecte ce problème.
Règle exhaustive-deps d’ESLint
La règle ESLint react-hooks/exhaustive-deps vous avertit lorsque des dépendances d’effet manquent. Il est presque toujours correct de suivre ses suggestions : les dépendances obsolètes provoquent des bogues.
useEffect et useLayoutEffect
useEffect s’exécute après l’affichage par le navigateur. useLayoutEffect s’exécute de manière synchrone après les mutations du DOM, avant l’affichage. Utilisez useLayoutEffect pour lire les mesures du DOM et éviter les scintillements visuels.
Plusieurs effets
Utilisez plusieurs appels à useEffect pour séparer les préoccupations indépendantes. Chaque effet peut avoir son propre tableau de dépendances et sa propre logique de nettoyage.
// Separate effects for separate concerns:
useEffect(() => { document.title = `${count} items`; }, [count]);
useEffect(() => {
const sub = wsClient.subscribe(onMessage);
return () => sub.unsubscribe();
}, []);Conditions de course — le drapeau ignore
Lorsqu’un effet récupère des données en fonction des propriétés, des requêtes antérieures peuvent aboutir après les suivantes. Utilisez un drapeau de nettoyage pour ignorer les réponses obsolètes.
useEffect(() => {
let ignore = false;
async function load() {
const data = await fetchUser(userId);
if (!ignore) setUser(data); // only update if not cleaned up
}
load();
return () => { ignore = true; };
}, [userId]);Double exécution de l’effet en mode Strict
Le mode Strict de React 18 monte, démonte puis remonte les composants en développement afin de faire apparaître les problèmes de nettoyage. Vos effets s’exécuteront deux fois : c’est intentionnel et cela aide à détecter les nettoyages manquants.
Quand ne pas utiliser useEffect
N’utilisez pas useEffect pour : 1) déduire l’état des propriétés (calculez-le pendant le rendu) ; 2) réinitialiser l’état lors des changements de propriétés (utilisez la propriété key) ; 3) mettre à jour l’état sans condition (cela provoque des boucles). En cas de doute, demandez-vous : ce code réagit-il à un événement utilisateur ou à un système externe ?
Vérification rapide
Quand la fonction de nettoyage de useEffect s’exécute-t-elle ?
Récapitulatif : useEffect
Les effets secondaires s’exécutent après le rendu. Un tableau de dépendances vide signifie une exécution au montage. Un tableau de dépendances déclenche l’effet lors de changements précis. Retournez une fonction de nettoyage pour éviter les fuites. Utilisez plusieurs effets pour séparer les préoccupations. Le drapeau ignore empêche les réponses obsolètes des récupérations de données. Le mode Strict déclenche deux exécutions pour tester le nettoyage. N’utilisez pas useEffect pour des valeurs dérivées ou un état que vous pouvez calculer pendant le rendu.
Questions Fréquemment Posées
La leçon « Bases de useEffect : dépendances et nettoyage » est-elle gratuite ?
Oui — le texte complet de « Bases de useEffect : dépendances et nettoyage » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Bases de useEffect : dépendances et nettoyage » ?
Exécutez des effets secondaires après le rendu, contrôlez leur réexécution avec le tableau de dépendances et renvoyez une fonction de nettoyage pour éviter les fuites de mémoire. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Bases de useEffect : dépendances et nettoyage » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Bases de useEffect : dépendances et nettoyage
- Récupérer des données au montage
- Gérer les états de chargement et d’erreur
- AbortController pour le nettoyage