Watch

Actor-local reactive response — run code when a local read changes.

commitWatch = watch(
  () => this.searchQuery(),
  (current) => {
    this.resultsVisible.set(current.trim().length > 0);
  },
);

watch takes a source function and a handler. The source declares what is being observed; the handler runs when it changes.

Use it for

• Responding to the actor’s own state.
• Keeping derived behaviour — as opposed to derived values — next to the state it depends on.

Generator handlers

Use function* when the handler needs to yield authored time. JavaScript has no generator arrow function, so the explicit this type is how the handler stays typed:

fadeWhenActive = watch(
  () => this.active(),
  function* (this: SearchBox, active) {
    yield* this.appearance.opacity.tween(active ? 1 : 0.4, 0.2);
  },
);

Arrow sources and arrow handlers are the default for synchronous work; reach for function* only when the response animates.

Do not use it for