← Back to all guides

Streaming LLM Responses in React: Fast UX Tips

Why streaming matters in a React chat UI

When users ask an LLM a question, the difference between a 4-second wait and a word-by-word response is huge. Streaming makes the interface feel alive, reduces perceived latency, and gives users a chance to stop generation early if the answer is going off track. In a React frontend, the goal is simple: render partial output as it arrives without causing unnecessary re-renders or breaking the connection.

The best streaming experiences do not just show text faster. They also preserve typing responsiveness, handle cancellation cleanly, and keep the code easy to extend for message history, tool calls, and markdown rendering.

Start with an API that supports real streaming

Before you optimize React, make sure your model endpoint supports token streaming in an OpenAI-compatible format. That is where 59API is especially practical: it offers cheap pay-as-you-go access to Claude and GPT models, works with the OpenAI SDK, and uses the base URL https://api.59api.com. Because it is compatible with Claude Code, Codex, and standard OpenAI clients, you can wire up streaming without rebuilding your stack.

For teams that are testing several models, the low cost matters. You can compare Sonnet, Haiku, Opus, or GPT variants in real traffic without paying premium provider prices on every prompt. The referral rebate is a nice extra when you bring other developers onto the same workflow.

The browser-side pattern that works best

In React, think of streaming as a three-part loop: request, read chunks, append text. The request should include the streaming flag, the reader should consume the response body incrementally, and the UI should only update with a buffered string.

• Use an AbortController so the user can cancel generation immediately.
• Keep the active text in a ref and publish updates to state in batches, not on every byte.
• Decode bytes safely with TextDecoder, because chunks can split UTF-8 characters across boundaries.
• Parse SSE boundaries if your endpoint returns server-sent events, then ignore the final data marker.

A common mistake is calling setState for each tiny token. That creates avoidable render pressure, especially in long answers. Instead, collect incoming content in a local buffer or ref, then flush it to state on each chunk or on a short animation frame interval. That keeps the typing effect smooth while preserving React performance.

Practical parsing tips for streamed responses

Many OpenAI-style endpoints stream as event lines rather than a single JSON object. The safest approach is to split on blank lines, strip the data prefix, and merge only the delta content into your final message. If the payload includes tool call metadata, keep that separate from user-visible text until the stream ends.

Also watch for edge cases: a chunk may arrive in the middle of a JSON object, a markdown code fence may be incomplete until the final token, and some mobile browsers are less forgiving with long-lived connections. Always wrap parsing in a try-catch path and surface a clean retry option rather than leaving the UI stuck.

React-specific performance tricks

• Store the controller in a ref so rerenders do not restart the request.
• Separate transcript state from transient loading state to avoid list-wide rerenders.
• Memoize message rows if you are rendering a full conversation, not just the latest response.
• Defer expensive markdown or syntax highlighting until the stream completes, or apply it only to the latest assistant message.

If you want an even smoother feel, scroll the chat container to the bottom only when the user is already near the bottom. That avoids yanking the viewport away while they are reading older content.

Why 59API is a smart backend for this workflow

Streaming is only useful if you can afford to test, iterate, and ship. 59API helps because it combines low-cost access with native official-quality models, so you are not sacrificing output quality to save money. Since it is compatible with the OpenAI SDK, you can point existing code at the relay and keep your frontend logic the same. That makes it ideal for rapid prototyping, production chat apps, and multi-model evaluation.

If you are building a React app that depends on frequent LLM calls, it is worth signing up and running a small end-to-end test with your own prompts. You will quickly see how much better the UX feels when responses stream in real time and the API bill stays manageable.

Final takeaway

The winning formula is straightforward: use an OpenAI-compatible streaming endpoint, read chunks with a clean abortable loop, batch React updates, and choose a relay that keeps costs low without degrading model quality. With a setup like 59API at https://api.59api.com, you can focus on user experience instead of infrastructure friction.