Angular Academy · Les

Effectopruiming en levenscyclus

Ruim resources binnen effects op.

Les 3 van 413 stappen

Effectopruiming en levenscyclus is een gratis Angular Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.

Waarom opruimen belangrijk is

Een effect kan resources starten: timers, subscriptions en eventlisteners. Telkens wanneer het effect opnieuw wordt uitgevoerd, moet de oude resource eerst worden afgebroken — anders lekken timers en listeners. Angular biedt hiervoor de hook onCleanup.

De callback onCleanup

De effectfunctie ontvangt een functie onCleanup. Registreer hiermee een callback voor het afbreken; Angular roept die aan vóór de volgende uitvoering en bij het vernietigen.

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

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

Opruimen gebeurt vóór elke heruitvoering

Wanneer een afhankelijkheid verandert, roept Angular eerst de geregistreerde opruimfunctie aan en voert daarna de effectbody opnieuw uit. Zo is er gegarandeerd steeds maar één actieve resource.

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

Eventlisteners opruimen

DOM-listeners die in een effect worden toegevoegd, moeten bij het opruimen worden verwijderd om dubbele handlers en lekken te voorkomen.

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

Opruimen met subscriptions

Als een effect zich abonneert op een Observable, zeg je die subscription op tijdens het opruimen. (Vaak zou je hiervoor andere hulpmiddelen gebruiken, maar dit laat het patroon zien.)

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

Opruimen bij vernietiging

Wanneer de component die eigenaar is van het effect wordt vernietigd, voert Angular automatisch de laatste opruimactie uit en vernietigt daarna het effect. Er blijven geen gelekte timers achter.

Volgorde: opruimen en daarna de body

De allereerste keer dat een effect wordt uitgevoerd, is er niets om op te ruimen. Vanaf de tweede uitvoering is de volgorde altijd: opruimen -> body.

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

Vermijd zwaar werk zonder opruimen

Elke langlevende resource die in een effect wordt gestart, moet een bijbehorende opruimactie hebben. Een veelvoorkomende fout is opruimen vergeten, waardoor intervallen zich bij elke wijziging van een afhankelijkheid opstapelen.

De optie manualCleanup

Voor effects die buiten een component worden gemaakt, bijvoorbeeld in een rootservice die altijd blijft bestaan, kun je de optie manualCleanup gebruiken. Roep vervolgens zelf ref.destroy() aan wanneer dat passend is.

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

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

DestroyRef als alternatief

Voor het afbreken van iets anders dan een effect kun je DestroyRef injecteren en callbacks registreren met onDestroy. Geef binnen effects de voorkeur aan onCleanup voor opruimen per uitvoering.

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

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

Alles samenvoegen

Een gedebounced synchronisatie-effect: elke waardewijziging annuleert de vorige timer en plant een nieuwe opslagactie.

const query = signal('');

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

Korte controle

Test je begrip van het opruimen van effects.

Beantwoord dit in de interactieve les

Samenvatting: opruimen en levenscyclus van effects

Gebruik de parameter onCleanup om resources af te breken die binnen een effect zijn gestart.

Opruimen gebeurt vóór elke heruitvoering en bij vernietiging.
Ruim timers, listeners en subscriptions altijd op.
manualCleanup voor langlevende effects; DestroyRef voor algemene opruimacties.

Volgende: linkedSignal en geavanceerde patronen.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 38
Lessen: 144

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Effectopruiming en levenscyclus” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Effectopruiming en levenscyclus”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.

Wat leer ik in “Effectopruiming en levenscyclus”?

Ruim resources binnen effects op. Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Angular Academy te beginnen?

Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Effectopruiming en levenscyclus”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Angular Academy?

Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Angular Academy