Managing Side Effects with effect()

Snippet

Managing Side Effects with effect()

The effect() function tracks signal dependencies automatically and re-runs its code whenever any used signal updates.

snippet.js
javascript
export class DashboardComponent {
  count = signal(0);
  constructor() {
    effect(() => {
      console.log(`The count changed to: ${this.count()}`);
      localStorage.setItem('userCount', this.count().toString());
    });
  }
}

angular

Breakdown

effect(() => { ... })

Registers a reactive side effect that runs within the injection context.

this.count()

Reading the signal value automatically adds it as a dependency to the effect.

localStorage.setItem

An example of a side effect that synchronizes state with an external API.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Managing Side Effects with effect()

Related