← All examplesCore / live

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.
Zidom JS / Example sourceREAD ONLY
src›demos›effects.tsx
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>  );}
● zidom / effectsTSX · UTF-8 · Copyable source

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.