Effects & Side Effects

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

const query = signal('shoes');

// Schedules an initial run, then reacts to changes in tracked signals.
// Create this inside an injection context (or pass an injector option).
effect(() => {
  console.log('searching for', query());
});

query.set('boots');  // effect runs again

@Component({ /* ... */ })
export class SearchBox {
  private readonly query = signal('');

  // A field initializer runs inside an injection context, so this is fine.
  private readonly logger = effect(() => console.log(this.query()));
}

// Outside an injection context you must pass one explicitly:
effect(() => { /* ... */ }, { injector: this.injector });

const count = signal(0);
effect(() => console.log('count is', count()));

count.set(1);
count.set(2);
count.set(3);
// Logs "count is 3" ONCE — not three times.
//
// Effects are SCHEDULED, not synchronous. Angular coalesces the writes and
// runs the effect once, with the final value. You never see an intermediate
// state in this run. This is coalescing, not an atomic transaction:
// ordinary synchronous reads between separate writes can see intermediate values.

effect((onCleanup) => {
  const room = roomId();
  const socket = chat.connect(room);

  onCleanup(() => socket.close());
});

// onCleanup runs:
//   1. before EVERY subsequent run of the effect, and
//   2. once when the effect is destroyed.
//
// So switching rooms closes the old socket before opening the new one, and
// leaving the page closes the last one. No leaks, no manual bookkeeping.

effect(() => {
  const status = orderStatus();                  // tracked -> re-runs
  const name = untracked(() => customerName());  // read, NOT tracked

  sendEmail(name, status);
});

// Changing orderStatus sends an email.
// Changing customerName does NOT -- but the next email uses the new name.

// ❌ Using an effect to keep one signal in sync with another.
const items = signal<Item[]>([]);
const itemCount = signal(0);

effect(() => itemCount.set(items().length));

// Problems: itemCount is briefly stale, anyone can write nonsense into it,
// and you have created a second source of truth for one fact.

// ✅ Derive it. One source of truth, always correct, no scheduling gap.
const itemCount = computed(() => items().length);

// Ask: am I producing a VALUE, or performing an ACTION?

computed()  ->  a value derived from other signals        (pure, cached)
effect()    ->  an action to run when state changes       (impure, scheduled)

// Producing a value?          computed()
// Logging / analytics?        effect()
// Writing to localStorage?    effect()
// Pure signal derivation?     computed()
// Derived with overrides?     linkedSignal()
// Reading/writing the DOM?    afterRenderEffect()
// Derived but overridable?    linkedSignal()  -- Module 7

// Created in a component/service -> destroyed with it. Nothing to do.
export class Widget {
  private readonly logger = effect(() => console.log(this.value()));
}

// Need to stop it early? effect() returns an EffectRef.
const ref = effect(() => poll(url()));
ref.destroy();

// Opting out of automatic cleanup (you must then destroy it yourself):
effect(() => { /* ... */ }, { manualCleanup: true, injector: myInjector });

readonly draft = signal('');

private readonly autosave = effect((onCleanup) => {
  const text = this.draft();
  if (!text) return;

  const timer = setTimeout(() => save(text), 1200);

  // Every keystroke re-runs the effect, and cleanup cancels the previous
  // pending save. Only the final pause actually writes. That is debouncing,
  // with no library and no subscription to manage.
  onCleanup(() => clearTimeout(timer));
});