← All notes
/
React PerformanceHCI60fps

Decoupling State from Render in LLM Streaming

The naive approach to building an AI chat interface is to connect a Server-Sent Events (SSE) stream directly to a React state setter. Every time a new token chunk arrives (often at sub-50ms intervals), you call setState(prev => prev + chunk).

This is a performance trap. Triggering a reconciliation cycle on every single token blows through the browser's 16ms frame budget. The solution is to decouple ingestion from rendering. We utilized a mutable useRef buffer to capture high-velocity incoming chunks synchronously, then used a throttled flush mechanism (synced with requestAnimationFrame) to commit to the DOM only when the browser was ready to paint.