Real-Time Analytics Dashboards Must Batch Updates to Prevent DOM Thrashing

A real-time analytics dashboard receiving dozens of metric updates per second re-renders on each WebSocket message, causing the UI to freeze as the DOM is updated far faster than the browser's 60fps frame budget.

Accumulate incoming updates in a buffer and flush them on the next animation frame. This limits UI updates to 60fps regardless of data arrival rate.

const updateBuffer = new Map<string, MetricUpdate>();
let rafId: number | null = null;

function enqueueUpdate(update: MetricUpdate) {
  updateBuffer.set(update.metricId, update); // latest value per metric

  if (rafId === null) {
    rafId = requestAnimationFrame(() => {
      const updates = new Map(updateBuffer);
      updateBuffer.clear();
      rafId = null;
      applyUpdates(updates);
    });
  }
}

ws.onmessage = (event) => {
  const update = JSON.parse(event.data) as MetricUpdate;
  enqueueUpdate(update);
};

requestAnimationFrame fires at the display refresh rate (60–120Hz). Batching into it means at most one render per frame, discarding intermediate values that would never be visible anyway. This is the same technique React's concurrent mode uses internally.