Real-Time Without the Jank

On a travel platform I worked on, a single search could return thousands of results. Waiting for the whole set before rendering felt broken. Streaming fixed it, but only after I stopped fighting the browser's main thread.

Stream, then batch the UI

Server-Sent Events push results as they arrive, but updating React on every single message will lock the page. I buffer incoming items and flush them to state on an animation frame, so the UI stays smooth no matter how fast the stream is.

let buffer = [];
source.onmessage = (e) => {
  buffer.push(JSON.parse(e.data));
};
// flush at most once per frame
function flush() {
  if (buffer.length) { setResults((r) => [...r, ...buffer]); buffer = []; }
  requestAnimationFrame(flush);
}