Angular Academy · Leçon

Nettoyage des effets et cycle de vie

Nettoyez les ressources à l’intérieur des effets.

Nettoyage des effets et cycle de vie est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Pourquoi le nettoyage est important

Un effet peut démarrer des ressources : minuteurs, abonnements et écouteurs d’événements. Chaque fois que l’effet s’exécute à nouveau, l’ancienne ressource doit d’abord être arrêtée — sinon vous accumulez des minuteurs et des écouteurs. Angular fournit pour cela un point d’extension onCleanup.

La fonction de rappel onCleanup

La fonction de l’effet reçoit une fonction onCleanup. Enregistrez-y une fonction de rappel de nettoyage ; Angular l’appelle avant l’exécution suivante et lors de la destruction.

import { effect } from '@angular/core';

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), 1000);
  onCleanup(() => clearInterval(id));
});

Le nettoyage s’exécute avant chaque nouvelle exécution

Lorsqu’une dépendance change, Angular appelle d’abord le nettoyage enregistré, puis réexécute le corps de l’effet. Cela garantit qu’une seule ressource est active à la fois.

const delay = signal(1000);

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), delay());
  onCleanup(() => clearInterval(id)); // clears old interval first
});

delay.set(500); // old interval cleared, new one started

Nettoyer les écouteurs d’événements

Les écouteurs du DOM ajoutés dans un effet doivent être supprimés lors du nettoyage afin d’éviter les gestionnaires en double et les fuites.

effect((onCleanup) => {
  const handler = () => console.log(window.innerWidth);
  window.addEventListener('resize', handler);
  onCleanup(() => window.removeEventListener('resize', handler));
});

Nettoyer les abonnements

Si un effet s’abonne à un Observable, désabonnez-vous lors du nettoyage. (Vous utiliseriez souvent d’autres outils, mais cet exemple montre le principe.)

effect((onCleanup) => {
  const sub = interval$.subscribe(v => console.log(v));
  onCleanup(() => sub.unsubscribe());
});

Nettoyage lors de la destruction

Lorsque le composant propriétaire de l’effet est détruit, Angular exécute automatiquement le nettoyage final, puis détruit l’effet. Aucun minuteur ne reste en fuite.

Ordre : nettoyage puis corps

Lors de la toute première exécution d’un effet, il n’y a rien à nettoyer. À partir de la deuxième exécution, l’ordre est toujours : nettoyage -> corps.

let runs = 0;
effect((onCleanup) => {
  runs++;
  console.log('run', runs, dep());
  onCleanup(() => console.log('cleanup before run', runs + 1));
});

Éviter les traitements lourds sans nettoyage

Toute ressource persistante démarrée dans un effet doit avoir un nettoyage correspondant. Un problème courant consiste à oublier le nettoyage, ce qui entraîne l’accumulation des intervalles à chaque modification d’une dépendance.

Option manualCleanup

Pour les effets créés en dehors d’un composant (par exemple dans un service racine qui reste actif indéfiniment), vous pouvez utiliser l’option manualCleanup, puis appeler vous-même ref.destroy() au moment approprié.

const ref = effect(() => {
  console.log(value());
}, { manualCleanup: true });

// You are now responsible for:
// ref.destroy();

DestroyRef comme solution alternative

Pour un nettoyage qui ne concerne pas un effet, vous pouvez injecter DestroyRef et enregistrer des fonctions de rappel avec onDestroy. Dans les effets, préférez onCleanup pour le nettoyage à chaque exécution.

import { inject, DestroyRef } from '@angular/core';

const destroyRef = inject(DestroyRef);
destroyRef.onDestroy(() => console.log('component destroyed'));

Assembler les éléments

Un effet de synchronisation avec temporisation : chaque modification de valeur annule le minuteur précédent et en programme un nouveau pour l’enregistrement.

const query = signal('');

effect((onCleanup) => {
  const q = query();
  const id = setTimeout(() => save(q), 300);
  onCleanup(() => clearTimeout(id));
});

Vérification rapide

Testez votre compréhension du nettoyage des effets.

Récapitulatif : nettoyage et cycle de vie des effets

Utilisez le paramètre onCleanup pour arrêter les ressources démarrées dans un effet.

Le nettoyage s’exécute avant chaque nouvelle exécution et lors de la destruction.
Nettoyez toujours les minuteurs, les écouteurs et les abonnements.
manualCleanup convient aux effets persistants ; DestroyRef au nettoyage général.

Ensuite : linkedSignal et les modèles avancés.

Questions Fréquemment Posées

La leçon « Nettoyage des effets et cycle de vie » est-elle gratuite ?

Oui — le texte complet de « Nettoyage des effets et cycle de vie » 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 Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Nettoyage des effets et cycle de vie » ?

Nettoyez les ressources à l’intérieur des effets. Tu pratiques Angular 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 Angular Academy ?

Aucune expérience préalable n'est requise. Angular 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 3 sur 4.

Combien de temps prend la leçon « Nettoyage des effets et cycle de vie » ?

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 Angular Academy ?

Oui. Chaque leçon Angular 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

← Retour à Angular Academy