Home▸Computer Science▸Fine-Grained Reactivity: Observable Dependency Graph

Fine-Grained Reactivity: Observable Dependency Graph

Interactive 3D 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.

Computer Science3DModerate60 FPS📱 Mobile-adapted⇄ 2D version

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 simulator renders that dependency graph in 3D: blue state atoms in an inner ring, orange reaction nodes in an outer ring, 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 quantifying exactly how many re-runs fine-grained tracking avoids.

⚙ Under the hood

An interactive 3D 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.

mobile developmentstate managementreactive programmingMobXobserver patternsoftware architecture

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install