HomeComputer ScienceFine-Grained Reactivity 2D: Observable Dependency Graph

Fine-Grained Reactivity 2D: Observable Dependency Graph

Interactive 2D dependency graph showing how MobX-style fine-grained reactive state tracks exactly which observers read which atoms, so a mutation re-runs only the reactions that actually depend on it -- versus a naive broadcast store that re-runs everything. Drag to rotate the ring layout, scroll to zoom, and watch a live re-run history strip alongside the graph.

Computer Science2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-mobile-state-management-patterns ↗ Open standalone

Mobile apps that manage state with observables (MobX, Recoil-style atoms, SwiftUI's @State/@Published) don't re-render everything on every change — they track, per reaction, exactly which pieces of state that reaction actually read, and only re-run the reactions whose dependency set includes the atom that changed. This 2D simulator renders that dependency graph as two concentric rings: blue state atoms inside, orange reaction nodes outside, connected by the exact subscription edges a real observable store would build automatically. Mutate an atom and watch propagation happen live in either fine-grained mode (only true dependents flash green and re-run) or naive broadcast mode (every reaction re-runs regardless of whether it reads that atom), with live counters and a scrolling history strip quantifying exactly how many re-runs fine-grained tracking avoids.

⚙ Under the hood

An interactive 2D dependency graph showing how MobX-style fine-grained reactive state tracks exactly which observers read which atoms, so a mutation re-runs only its true dependents -- versus a naive broadcast store that re-runs every reaction on every change. Drag to rotate the ring layout, scroll to zoom, and read a live history strip of re-runs avoided.

mobile developmentstate managementreactive programmingMobXobserver patternsoftware architecture

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)