patterntypescriptModerate

Streaming AI responses to the UI requires React state management care

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

streamingreactre-rendersperformancerefdebouncestate-update

Problem

Naively calling setState on each streamed token causes dozens of re-renders per second, making the UI stutter and potentially causing performance issues in complex component trees.

Solution

Buffer streamed tokens in a ref or use a debounced state update. Alternatively, use the Vercel AI SDK which internally optimizes updates. For custom implementations, collect tokens in a string ref and update state at most every ~50ms using a debounce or requestAnimationFrame.

Why

React batches state updates in React 18, but streaming produces tokens faster than one React render cycle. Excessive state updates can still overwhelm the reconciler in complex trees.

Gotchas

React 18 automatic batching helps but doesn't eliminate the issue for high-frequency updates
Using a ref for the buffer means the component won't re-render on each token — sync to state periodically
Always clean up the streaming subscription/abort controller on component unmount

Code Snippets

Buffered streaming with periodic state update

const bufferRef = useRef('');
const [displayText, setDisplayText] = useState('');

useEffect(() => {
  const interval = setInterval(() => {
    if (bufferRef.current !== displayText) {
      setDisplayText(bufferRef.current);
    }
  }, 50);
  return () => clearInterval(interval);
}, [displayText]);

// in stream handler:
bufferRef.current += token;

Context

Custom streaming chat UI implementations without a framework-level SDK

Revisions (0)

No revisions yet.