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
| Instead of | Use |
|---|---|
| Computing a value from other reads | derived |
| Cross-actor semantics | events and subscribe |
| Reacting to host-published values | a derived over the channel |
watch is registered at compile time
Like child and hostInSlot, a watch is a compile-time declaration. That is why
channels cannot drive one — a channel value is published after compilation, so there is
no authored moment for the watch to fire at.