Reactivity — Signals
Dathra's reactivity system is built onalien-signalsand follows the TC39
Signals proposal. It provides fine-grained reactivity without a virtual DOM.
For exact signatures and extension-oriented details, see the Reactivity API Reference.
signal()
Creates a reactive value that can be read and written:
ts
import { signal } from "@dathra/core";
const count = signal(0);
count.value; // => 0 (read)
count.set(5); // => write
count.set(count.value + 1); // incrementcomputed()
Derives a reactive value from other signals:
ts
import { signal, computed } from "@dathra/core";
const count = signal(3);
const doubled = computed(() => count.value * 2);
doubled.value; // => 6effect()
Runs a side effect whenever its dependencies change:
ts
import { signal, effect } from "@dathra/core";
const count = signal(0);
effect(() => {
console.log("count is", count.value);
});
// logs "count is 0"
count.set(1); // logs "count is 1"batch()
Batch multiple signal updates to trigger effects once:
ts
import { signal, batch, effect } from "@dathra/core";
const a = signal(0);
const b = signal(0);
effect(() => console.log(a.value, b.value));
batch(() => {
a.set(1);
b.set(2);
});
// logs "1 2" once, not twicecreateRoot() / onCleanup()
Manage reactive lifecycle and cleanup:
ts
import { signal, effect, createRoot, onCleanup } from "@dathra/core";
const dispose = createRoot(() => {
const count = signal(0);
effect(() => console.log(count.value));
onCleanup(() => console.log("cleaned up"));
});
dispose(); // runs cleanuptemplateEffect()
An effect optimized for template rendering — used internally by the DOM runtime for efficient updates.