Skip to content

Signals

A value that tells the code reading it when it changes.

Create a signal

Use the class or the factory function. Both make the same thing.

const count = new Signal(0);
const name = signal('Ada');

Read and write

count.value;                 // read, and track it
count.value = 5;             // write
count.set((c) => c + 1);     // write from the previous value
count.peek();                // read without tracking

A write with a value equal to the current one, compared with Object.is, notifies nobody. Pass equals to compare another way.

const point = new Signal({ x: 0, y: 0 }, {
  equals: (a, b) => a.x === b.x && a.y === b.y,
});

In templates

Bind a function to keep a value live. Here the input writes the signal and the paragraph reads it.

Objects and arrays

A signal tracks its value, not what is inside it. Replace an object or array to change it, do not mutate it in place.

todos.set((list) => [...list, newTodo]);          // notifies
todos.value.push(newTodo);                        // does not

For nested state you change in place, use a store.