Effects

effect()

An effect runs once, tracks the signals it reads, and runs again when one of them changes. Its first run happens in a microtask.

effect(() => {
  document.title = `${this.count.value} items`;
});

Create effects in a component's setup(), so the component owns them and disposes them on unmount.

onCleanup()

Call onCleanup() inside an effect to undo its previous run, such as a timer or a listener. It runs before the next run and when the effect is disposed.

effect(() => {
  const delay = this.delay.value;
  const timer = setInterval(() => this.tick(), delay);
  onCleanup(() => clearInterval(timer));
});

on()

on(source, fn) tracks only the source and passes the new and previous values. defer: true skips the first run.

effect(
  on(() => this.page.value, (page, previous) => {
    console.log(previous, '->', page);
  }, { defer: true })
);

untrack()

Read a signal inside an effect without depending on it.

effect(() => {
  save(this.draft.value, untrack(() => this.user.value));
});