Effects & batching
Derived work, dependency tracking, microtasks and batched writes.
01 / Live preview● Interactive
Interact with the component. The source on the right is the actual code.
effects.tsx
● Zidom
import { signal, effect, batch, onCleanup, untrack } from '@zidomjs/core';export default function EffectsDemo() { const first = signal(1); const second = signal(2); const runs = signal(0); const sum = signal(3); const stop = effect(() => { sum.value = first.value + second.value; runs.value = untrack(() => runs.value) + 1; }); onCleanup(stop); return ( <div className="example-card"> <p>One effect observes two signals. Batch multiple writes.</p> <p> First: <strong>{first}</strong> · Second: <strong>{second}</strong> </p> <p> Sum: <strong>{sum}</strong> · Effect runs: <strong>{runs}</strong> </p> <button onClick={() => batch(() => { first.value++; second.value++; }) } > Increment both in a batch </button> </div> );}This website demo runs pinned Zidom beta.1 packages; the latest framework release is beta.2. See release details and limitations. Report a problem with this example.