Fine-Grained Reactivity: Observable Dependency Graph

Tracking Mode

MobX-style: each reaction subscribes only to the atoms it actually reads. Mutating an atom re-runs only its dependents.

Graph

Reactions (observers) 5

Auto-mutate interval 1.0s

Live Counters

Mutations

Reaction re-runs

Would-be re-runs if broadcast

Re-runs avoided

How it works

An observable store holds N state atoms. Each reaction (a UI binding, a computed value, an effect) has a dependency set D built automatically the first time it runs, by recording which atoms it actually reads:

D(reaction_j) = { atom_i : reaction_j read atom_i on its last run }

When atom i mutates, a fine-grained store re-runs only the reactions where i ∈ D(reaction_j):

runs(mutation) = |{ j : i ∈ D(reaction_j) }|   (fine-grained)
runs(mutation) = |reactions|                    (naive broadcast)

This is exactly the trade-off between the article's two families of mobile state patterns: MobX-style observables use automatic dependency tracking and re-render only what changed, while a naive global broadcast store (a Context/EventBus with no memoized selectors) notifies every subscriber on every change, however small.

Mode buttons — switch the store between fine-grained tracking and naive broadcast; the wiring and mutation stream stay identical, only the propagation rule changes.
Reactions slider — grows or shrinks the observer graph and rewires random dependency subsets.
Auto-mutate interval — 0s pauses the automatic stream; drag right to fire mutations continuously.
Mutate Random Atom — fires one manual mutation so you can watch a single propagation step.
The counters make the asymptotic cost visible: with R reactions each depending on ~40% of atoms, broadcast mode does O(R) work per mutation while fine-grained does O(|D|) — the "re-runs avoided" percentage is exactly the efficiency MobX/Recoil-style fine-grained reactivity buys a mobile app's render loop.

State atom Reaction (observer) Re-ran this mutation

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.