What a signal is
A signal is a container holding a value plus a list of subscribers. Reading a signal during a computation registers a dependency. Writing a new value notifies exactly the computations that read it.
Three pieces
- Signal: a readable and writable reactive value.
- Computed: a derived value that recomputes only when its inputs change.
- Effect: a side effect that reruns when any signal it read changes.
Why it is fast
Frameworks built on a virtual DOM rerun a component and diff the output on every change. Signals instead build a dependency graph at runtime. When a value changes, only the specific effects and DOM bindings that depend on it run. There is no component rerender and no diff.
Tradeoffs
- Updates are surgical, so large trees stay cheap.
- Dependency tracking is automatic, removing manual dependency arrays.
- The mental model differs from top down rerendering, which can surprise teams used to it.
Solid, Preact Signals, Angular, and Vue use variants of this idea.
Key idea
Signals track dependencies at runtime so a change updates only the computations and DOM bindings that read it, avoiding whole component rerenders.