hardFrontend

What is the effect() function in Angular Signals, and when should you NOT use it?

Q: What is the effect() function in Angular Signals, and when should you NOT use it?

**Core concept.** An ** effect() ** is a reactive block that registers dependencies on any signals accessed inside it. It executes its code when those signals emit new values. While useful for side-effects like custom DOM manipulation, local storage persistence, or telemetry, it should **never** be used to write values to other signals or calculate derived state (which is the job of computed() ). Signal effect() <rect class='d-box-muted' x='380' y=

103 views

Understand the problem

Explain signals-based side effects and their limitations.

signalsreactivity

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Proper use of an effect to synchronize state to LocalStorage

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

@Component({
  selector: 'app-theme-selector',
  standalone: true,
  template: '<button (click)="toggleTheme()">Toggle Theme: {{ theme() }}</button>'
})
export class ThemeSelectorComponent {
  theme = signal('light');

  constructor() {
    effect(() => {
      localStorage.setItem('user-theme', this.theme());
    });
  }

  toggleTheme() {
    this.theme.update(t => t === 'light' ? 'dark' : 'light');
  }
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How does Hydration work in modern Angular SSR, and what is non-destructive hydration?

Explain how you can bridge Signals and RxJS observables using toSignal() and toObservable().