Building a real-time order book
--
Most developers think building a real-time order book is just “connect a WebSocket and render data.”
After 4+ years building crypto exchange UIs, here’s what it actually takes:
The naive approach:
→ Subscribe to WebSocket
→ setState() on every message
→ Watch your UI stutter at 60+ updates/sec
What actually works in production:
1. Batch your updates
Don’t re-render on every tick. Buffer incoming messages and flush them on requestAnimationFrame. Your UI stays smooth, your CPU stays sane.
2. Normalize your order book state
Use a Map keyed by price level — not an array. Updates become O(1) instead of O(n). At 1000+ price levels, this difference is massive.
3. Virtualize the list
React Window or TanStack Virtual. You should never be rendering 500+ DOM nodes for an order book. Ever.
4. Separate your data layer from your render layer
WebSocket data flows into a store (Zustand/Redux). Components subscribe to slices. This prevents cascading re-renders that kill performance.
5. Handle reconnection gracefully
WebSockets drop. Build exponential backoff + snapshot re-sync so users never see a stale order book after a reconnect.
The difference between a toy trading UI and a production-grade exchange frontend is entirely in these details.
