HomeComputer ScienceNormalized vs Denormalized State: Cache Drift Simulator

Normalized vs Denormalized State: Cache Drift Simulator

Interactive 3D simulator of client-side state normalization: dispatch updates to a single tracked entity and watch denormalized per-screen copies drift out of sync while a normalized single-source-of-truth store stays perfectly consistent.

Computer Science3DModerate60 FPS📱 Mobile-adapted
mobile-state-management ↗ Open standalone

Mobile and web apps constantly face the same question that Redux, MobX, StateFlow and LiveData all answer differently: does a screen hold its own copy of a piece of data, or does it read from one shared source of truth? This simulator makes that choice visible. A single tracked entity — a "Post" with a like count — sits in a canonical store; two to five screens observe it. In denormalized mode each screen caches its own copy, and dispatching an update only refreshes the screen that actually re-read the data, leaving the others drifting out of sync with a growing staleness age. Switch to normalized mode and every screen instead references the one canonical record, so an update reaches all of them in the same step and the consistency readout stays pinned at 100%. An "auto-resync on read" toggle shows the usual workaround — periodic refetching — and why it narrows the staleness window without ever closing it.

⚙ Under the hood

An interactive 3D simulator of client-side state normalization: dispatch updates to a single tracked entity and watch denormalized per-screen copies drift out of sync while a normalized single-source-of-truth store stays perfectly consistent.

state-managementstate-normalizationmobile-architecturecache-consistencysingle-source-of-truthsoftware-engineering

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

What did you find?

Add reproduction steps (optional)