Accumulating Deltas Safely Without Jank
Explore techniques to efficiently accumulate streaming text deltas in a browser environment without causing UI jank. Learn to use a safe buffer strategy as a single source of truth, batch updates for smooth rendering, and verify correctness with practical DevTools checks. Understand how to balance responsiveness with CPU cost for optimal user experience during model-driven streaming.
A reducer that assumes each delta is cheap to apply breaks down once deltas arrive quickly. Streaming looks correct until it hits real UI load. A message begins to appear, but fragments duplicate, a few characters go missing, and the scroll position jumps because the view re-renders on every tiny chunk.
The failure is observable in DevTools even when the network is fine. Deltas arrive quickly, your event-to-state reducer commits state on each delta, and the browser spends more time rendering than handling events. The engineering question becomes two separate decisions that have to agree with each other. How do you accumulate deltas without corrupting the text, and how often do you ask React or Vue to render the partial output?
A safe accumulator is a single source of truth
With the symptom tied to state updates, the next step is to make delta handling boring. A safe strategy treats each incoming delta as an opaque string fragment and appends it to a buffer in arrival order. The buffer becomes the only source of truth for the in-progress message, and you only promote it to final message text when the stream signals completion with .done. ...