A computed is lazy: its body does not run until something reads it, and the cached value is reused until a field it actually read changes. The counters below show how often each body runs.

const order = M.create(
    { price: {}, qty: {}, note: {} },
    { price: 10, qty: 3, note: '' }
);

const total = M.computed(() => order.get('price') * order.get('qty'));

total.get();              // 30 — body runs now
total.get();              // 30 — cached, body does not run

order.set('note', 'hi');  // 'note' was never read → no re-evaluation
total.get();              // 30 — still cached

order.set('qty', 4);
total.get();              // 40 — a dependency moved, so it re-evaluates

An effect runs immediately to collect its dependencies, then again whenever any of them change. It replaces hand-wiring a subscription and comparing field names by hand.

const stop = M.effect(() => {
    const user  = prefs.get('username');   // tracked
    const theme = prefs.get('theme');      // tracked

    // Read without subscribing to it
    const session = M.untracked(() => prefs.get('sessionId'));

    render(user, theme, session);
});

stop();   // unsubscribe

Writes never recompute anything synchronously. They mark dependents dirty and schedule a single microtask flush, so a burst of writes collapses into one pass. Use M.flush() when you need a derived value to settle immediately.

// Three separate writes, same tick → ONE effect run
form.set('a', 1);
form.set('b', 2);
form.set('c', 3);

// One batched write → also ONE effect run
form.set({ a: 1, b: 2, c: 3 });

// Need it settled right now (tests, or reading straight after a write)?
form.set('a', 9);
M.flush();

Dependencies are re-collected on every run, so a derivation stops listening to the branch it no longer takes. Switch the mode below and watch which input still triggers a re-run.

M.effect(() => {
    // Only ONE of x / y is a dependency at any moment
    const value = state.get('mode') === 'x'
        ? state.get('x')
        : state.get('y');

    log(value);
});

Domma.component() uses tracking automatically — the definition syntax is unchanged. Computeds re-evaluate only when a field they read changes, and a burst of writes produces one render.

Domma.component('order-summary', {
    template: '<p>{{label}}</p>{{#if freeDelivery}}<em>Free delivery</em>{{/if}}',

    data() { return { items: 1, unitPrice: 25, discount: false, note: '' }; },

    computed: {
        // Re-evaluates only when items / unitPrice / discount change
        label() {
            const gross = this.data.items * this.data.unitPrice;
            return `${this.data.items} item(s) — £${this.data.discount ? gross * 0.9 : gross}`;
        },
        freeDelivery() { return this.data.items * this.data.unitPrice > 50; }
    }
});