signal()
A signal is the smallest unit of reactive state in Summit: one value that keeps
track of every effect that read it. Computed values, effects, and the deep
reactive() proxy are all built on the same tracking core, so once you
understand signals the rest of the system follows.
Creating a signal
signal(initial) returns a signal that holds initial.
import { signal } from "summitjs";
const count = signal(0);The signal is a function, not an object with a .value property. You read it by
calling it, and you write it with .set().
Reading
Call the signal to get its current value. When you read a signal inside an effect() or computed(), that reader subscribes to the signal and re-runs whenever the value changes.
count(); // 0Writing
.set(next) replaces the value. Pass the next value directly, or a function
that receives the previous value and returns the next one.
count.set(1);
count.set((prev) => prev + 1); // now 2A write only wakes subscribers when the value actually changes, compared with
Object.is. Setting a signal to the value it already holds does nothing.
Peeking without subscribing
.peek() returns the current value without subscribing the active effect. Reach
for it when you need the value but do not want a later change to trigger a
re-run.
count.peek(); // 2, and the surrounding effect will not depend on countChecking for a signal
isSignal(x) returns true for any value produced by signal(), and false
otherwise.
import { signal, isSignal } from "summitjs";
isSignal(count); // true
isSignal(() => 0); // falsesignal is also available on the global as Summit.signal. isSignal ships as
a named export of summitjs.
How signals underpin the framework
Every reactive s- directive ultimately reads and writes signals. The state you
declare with s-data lives in a reactive() proxy, and
both signals and that proxy feed the one dependency-tracking engine described in
How reactivity works. For the HTML-first way to hold
and update state, see Reactivity and State. To derive a
cached value from a signal, reach for computed(); to run
a side effect when it changes, use effect().