Dashboards that choke under real data.

Most React performance challenges only show up at scale. The chart is fine with a thousand points. At a hundred thousand, with new points streaming in every second, the page locks up. The team blames React, then Highcharts, then the backend. The actual cause is usually a chain of small mistakes — re-rendering ancestors, unstable callbacks, mutating state through reference, and a streaming pipeline that doesn't batch.

We're building a live-data dashboard specifically designed to break under load — then engineering it until it doesn't. Highcharts with a streaming WebSocket source, decimation on read, render-throttling on write. The point is the methodology: instrument first, fix what the profiler actually shows, measure again. No guess-fixing.

• 01Streaming data pipeline with backpressure-aware batching on the client.
• 02Highcharts boost module and decimation tuned for the data shape, not copy-pasted from the docs.
• 03React Profiler + Chrome Performance traces driving every change.
• 04Memoisation discipline: stable identities, narrow dependency arrays, selective context boundaries.
• 05requestIdleCallback for non-critical work, requestAnimationFrame for the chart write loop.

Will hold 60fps at 100k+ live points on commodity hardware. The exercise demonstrates that React performance is a measurable engineering discipline — not a vibe, and not Highcharts' fault.

• React 19
• Highcharts
• WebSockets
• TypeScript