Signals Playground
Signals are becoming the shared reactivity model of the web: Vue, Preact, Solid, Angular and a TC39 proposal all use them. This page runs the same reactive graph through five implementations, so you can see where they agree and where they differ.
1. The diamond
b = a × 2, c = a × 3, d = b + c, plus an effect that reads d,
and one computed that nobody reads. Move the slider and watch the counters.
| Library | d | d ran | effect ran | unread computed ran | effects |
|---|
- Glitch-free: per update,
druns once, never with a half-updatedb/c. - Lazy vs eager: Solid memos compute eagerly, so the unread computed still runs. The others only compute on read.
- batch():
@vue/reactivityhas no public batch, so its effect runs once per write. In Vue apps the component scheduler does the batching. - TC39: the proposal ships no
effect(). It's built here onSignal.subtle.Watcherand runs on a microtask.
2. Benchmark (in your browser)
Pull-based workloads: write a signal, then read the graph. Median of 7 runs after warm-up. Absolute numbers depend on your machine and browser; compare the ratios.
3. Same counter, five APIs