class OrderBookManager { private bids: Map<number, number> = new Map(); private asks: Map<number, number> = new Map(); private lastUpdateId: number = 0; private buffer: OrderBookDiff[] = []; async initialize(symbol: string) { const ws = this.connectToStream(`${symbol.toLowerCase()}@depth`); const snapshot = await fetchOrderBookSnapshot(symbol, 1000); this.lastUpdateId = snapshot.lastUpdateId; this.bids = new Map(snapshot.bids.map(([p, q]) => [+p, +q])); this.asks = new Map(snapshot.asks.map(([p, q]) => [+p, +q])); for (const diff of this.buffer) { if (diff.U <= this.lastUpdateId + 1 && diff.u >= this.lastUpdateId + 1) { this.applyDiff(diff); } } this.buffer = []; } applyDiff(diff: OrderBookDiff) { if (diff.U !== this.lastUpdateId + 1) { console.error('Gap detected, reinitializing...'); this.initialize(this.symbol); return; } for (const [price, qty] of diff.b) { if (+qty === 0) this.bids.delete(+price); else this.bids.set(+price, +qty); } for (const [price, qty] of diff.a) { if (+qty === 0) this.asks.delete(+price); else this.asks.set(+price, +qty); } this.lastUpdateId = diff.u; this.notifySubscribers(); } getTopLevels(depth: number = 20) { const sortedBids = [...this.bids.entries()] .sort(([a], [b]) => b - a) .slice(0, depth); const sortedAsks = [...this.asks.entries()] .sort(([a], [b]) => a - b) .slice(0, depth); return { bids: sortedBids, asks: sortedAsks }; } } 

Steps to implement the order book:

1. Fetch the initial snapshot via REST.
2. Connect to WebSocket stream.
3. Buffer incoming diffs.
4. Apply diffs after snapshot, checking sequence.
5. Render only visible levels using virtualization.

For display, we use virtualization via @tanstack/react-virtual to render only visible rows. This allows handling 500+ levels without performance loss. Our differential update approach is 3 times faster than full reload every 100 ms, and buffering guarantees consistency even during temporary network disruptions.

Charts: TradingView Lightweight Charts vs Alternatives

For candlestick charts we use Lightweight Charts. This library is 2 times faster than Chart.js for candle rendering and provides built-in support for financial data. Comparison:

Example setup:

import { createChart, CandlestickSeries } from 'lightweight-charts'; function TradingChart({ symbol }: { symbol: string }) { const chartContainerRef = useRef<HTMLDivElement>(null); const seriesRef = useRef<CandlestickSeries>(); useEffect(() => { const chart = createChart(chartContainerRef.current!, { width: chartContainerRef.current!.clientWidth, height: 400, layout: { background: { color: '#1a1a2e' }, textColor: '#d1d4dc', }, grid: { vertLines: { color: '#2d2d4e' }, horzLines: { color: '#2d2d4e' }, }, crosshair: { mode: 1 }, timeScale: { borderColor: '#485c7b', timeVisible: true }, }); const candleSeries = chart.addCandlestickSeries({ upColor: '#26a69a', downColor: '#ef5350', borderUpColor: '#26a69a', borderDownColor: '#ef5350', }); seriesRef.current = candleSeries; loadHistoricalData(symbol, '1h').then((candles) => { candleSeries.setData(candles); chart.timeScale().fitContent(); }); const unsubscribe = wsGateway.subscribe(`candle:${symbol}:1h`, (candle) => { candleSeries.update(candle); }); return () => { unsubscribe(); chart.remove(); }; }, [symbol]); return <div ref={chartContainerRef} className="chart-container" />; } 

export function useWebSocket(url: string) { const wsRef = useRef<WebSocket | null>(null); const reconnectTimerRef = useRef<NodeJS.Timeout>(); const reconnectCountRef = useRef(0); const connect = useCallback(() => { wsRef.current = new WebSocket(url); wsRef.current.onclose = (e) => { if (!e.wasClean) { const delay = Math.min(1000 * 2 ** reconnectCountRef.current++, 30000); reconnectTimerRef.current = setTimeout(connect, delay); } else { reconnectCountRef.current = 0; } }; wsRef.current.onerror = () => wsRef.current?.close(); }, [url]); useEffect(() => { connect(); return () => { clearTimeout(reconnectTimerRef.current); wsRef.current?.close(); }; }, [connect]); return wsRef; }