All projectsRealtime
Market Data Simulator
Coalesced ticks with virtualized rows and per-symbol subscriptions
Live demo
Explore the market data simulator
High-frequency ticks coalesced into batched store updates — only visible rows reconcile.
Powered by a mock API and React Query
Overview
The Market Data Simulator mimics a live data feed without persistent connections. A local event stream emits price ticks every 200ms, a Map-based buffer coalesces duplicate symbol updates, and a 1-second flush writes once to normalized Zustand state. React.memo rows subscribe per symbol while TanStack Virtual keeps DOM size constant from 100 to 10,000 instruments.
Key features
- EventEmitter-based simulator decoupled from UI state
- Map buffer coalescing duplicate symbol ticks before flush
- 1 Hz batched Zustand updates to minimize React renders
- Per-row Zustand selectors with React.memo isolation
- TanStack Virtual list scaling to 10K symbols
- Development diagnostics for flush and render counts
Highlights
- Only changed rows reconcile after each flush
- Coalescing collapses ~5 tick batches into one update per symbol
- Virtualization holds DOM nodes to visible window + overscan
- Architecture mirrors production real-time dashboard patterns
