Angular Academy · Les

Effects en side effects

Reageer met effects op wijzigingen in signals.

Les 2 van 413 stappen

Effects en side effects is een gratis Angular Academy-les op CoddyKit. Dit is les 2 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.

Wat is een effect

Een effect() voert een functie uit telkens wanneer een signal dat de functie leest verandert. In tegenstelling tot computed zijn effects bedoeld voor neveneffecten: logging, synchroniseren met localStorage, API's aanroepen en de DOM bewerken.

Effects retourneren geen waarde.

Een effect maken

Een effect wordt onmiddellijk één keer uitgevoerd en daarna opnieuw telkens wanneer een bijgehouden signal verandert.

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

const count = signal(0);

effect(() => {
  console.log('count is', count());
});
// logs "count is 0" immediately
count.set(5); // logs "count is 5"

Effects hebben een injectiecontext nodig

Standaard moet effect() in een injectiecontext worden gemaakt — meestal in een constructor of veldinitialisatie van een component, directive of service.

import { Component, signal, effect } from '@angular/core';

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  user = signal('guest');
  constructor() {
    effect(() => console.log('user:', this.user()));
  }
}

Automatische afhankelijkheden bijhouden

Net als computed houden effects precies de signals bij die ze tijdens runtime lezen. Conditionele lezingen worden alleen bijgehouden wanneer ze worden bereikt.

const enabled = signal(true);
const value = signal(10);

effect(() => {
  if (enabled()) {
    console.log(value());
  }
});
// When enabled() is false, value is not a dependency

Signals synchroniseren met localStorage

Een klassiek gebruik van een effect: status bewaren telkens wanneer deze verandert.

const theme = signal('light');

effect(() => {
  localStorage.setItem('theme', theme());
});

theme.set('dark'); // writes "dark" to localStorage

Effects retourneren geen waarden

Gebruik computed() als je een afgeleide waarde nodig hebt. Effects zijn bedoeld voor acties zonder retourwaarde; het neveneffect zelf is hun resultaat.

// WRONG: trying to derive state in an effect
// effect(() => this.total = this.a() + this.b());

// RIGHT: derive with computed
// total = computed(() => this.a() + this.b());

Signals instellen in effects

Standaard staat Angular het schrijven naar signals binnen een effect niet toe, om lussen te voorkomen. Als je dit echt nodig hebt, geef je { allowSignalWrites: true } door — maar gebruik voor afleidingen bij voorkeur computed.

effect(() => {
  const v = source();
  derived.set(v * 2);
}, { allowSignalWrites: true });
// Use sparingly; computed() is usually better

Handmatig opruimen met EffectRef

effect() retourneert een EffectRef. Roep .destroy() aan om het effect handmatig te stoppen voordat de eigenaar wordt vernietigd.

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

const ref = effect(() => console.log(value()));
// later
ref.destroy(); // effect no longer runs

Effects worden automatisch opgeruimd

Wanneer een effect in een component wordt gemaakt, wordt het automatisch vernietigd wanneer de component wordt vernietigd. Je hoeft zelden zelf .destroy() aan te roepen.

Effects worden na het renderen uitgevoerd

Effects worden gepland en na wijzigingsdetectie uitgevoerd, gebundeld per microtask. Meerdere synchrone wijzigingen aan signals activeren het effect maar één keer.

const a = signal(0);

effect(() => console.log(a()));

a.set(1);
a.set(2);
a.set(3);
// Effect runs once with the final value 3 (batched)

Wanneer gebruik je effect of computed

computed: leid een waarde af uit signals (puur).
effect: reageer op signals door iets externs te doen (niet-puur).

Als je merkt dat je vanuit een effect een waarde retourneert, heb je waarschijnlijk een computed nodig.

Korte controle

Test je begrip van effects.

Beantwoord dit in de interactieve les

Samenvatting: effects

effect() voert een functie uit telkens wanneer de bijgehouden signals veranderen, uitsluitend voor neveneffecten.

Wordt onmiddellijk één keer uitgevoerd en daarna bij elke wijziging van een afhankelijkheid.
Heeft een injectiecontext nodig.
Wordt automatisch met de eigenaar vernietigd en retourneert een EffectRef voor handmatige besturing.
Gebruik computed voor afleidingen en effect voor acties.

Volgende: resources in effects opruimen.

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 “Effects en side effects” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Effects en side effects”, 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 “Effects en side effects”?

Reageer met effects op wijzigingen in signals. 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 2 van 4.

Hoe lang duurt de les “Effects en side effects”?

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