Signals & computed

Create a signal#

signal(initial) returns a reactive cell with a writable .value. The reactive engine tracks which effects and computed values read the signal. Writes are compared using Object.is; an unchanged value does not notify subscribers.

import { signal } from '@zidomjs/core';const temperature = signal(23);console.log(temperature.value); // 23temperature.value = 24;

Derive state with computed#

Computed values are lazy, memoized and readonly. Their dependencies are discovered by running the calculation.

import { signal, computed } from '@zidomjs/core';const price = signal(40);const quantity = signal(2);const total = computed(() => price.value * quantity.value);console.log(total.value); // 80quantity.value = 3;console.log(total.value); // 120

Use signals in JSX#

const count = signal(0);const message = computed(() => `Count: ${count.value}`);const view = <p>{message}</p>; // reactive text binding

When working without the experimental compiler, pass the signal or computed object directly to text children, or pass a getter. Simply passing count.value creates a snapshot.

Updating objects and arrays#

Signals compare references, not deep object properties. Replace nested data instead of mutating the same object in place.

const person = signal({ name: 'Zidane', score: 1 });person.value = { ...person.value, score: 2 }; // notifies

Next: Effects & lifecycle and Reactive rendering.

Run the example#

See the Zidom counter example and inspect the exact source next to the result.