System Design: Real-Time Analytics & Live Dashboard

import { create } from 'zustand';

interface StockStore {
  prices: Record<string, number>;
  updatePrices: (batch: Record<string, number>) => void;
}

export const useStockStore = create<StockStore>((set) => ({
  prices: {},
  updatePrices: (batch) =>
    set((state) => ({ prices: { ...state.prices, ...batch } })),
}));

// High-frequency WebSocket listener with 16ms rAF batching
let pendingBatch: Record<string, number> = {};
let rafScheduled = false;

export function connectStockSocket() {
  const ws = new WebSocket('wss://stream.marketdata.com');

  ws.onmessage = (event) => {
    const { symbol, price } = JSON.parse(event.data);
    pendingBatch[symbol] = price; // Enqueue tick into buffer

    if (!rafScheduled) {
      rafScheduled = true;
      requestAnimationFrame(() => {
        // Flush all ticks accumulated during this 16ms frame in ONE single React update!
        useStockStore.getState().updatePrices(pendingBatch);
        pendingBatch = {};
        rafScheduled = false;
      });
    }
  };
}