← Volver a las guías

Streaming LLM Responses in React: Fixes & FAQ

Why streaming feels broken in React

Streaming an LLM response should make your chat UI feel instant: the assistant starts typing before the full answer is ready. In React, the most common mistake is treating a streamed response like a normal JSON fetch. If you wait for the full body, you lose the whole point of streaming.

With an OpenAI-compatible relay such as 59API, you can stream Claude or GPT output at a low per-token cost, without sacrificing model quality. Because 59API works with any OpenAI SDK and uses the base URL https://api.59api.com, you can keep your frontend logic simple while still accessing official-quality models like Claude Opus, Sonnet, Haiku, Fable, and GPT models.

How to set it up the right way

In a React frontend, the safest pattern is to stream through a backend route, then forward the chunks to the browser. That keeps your API key off the client and gives you a place to normalize errors. If you do stream directly in the browser, use fetch with ReadableStream rather than awaiting response.json().

• Send a POST request with stream: true.
• Read the response with response.body.getReader().
• Decode bytes with TextDecoder.
• Append only the new token delta to state.
• Use AbortController so users can stop generation.

A practical flow is: create one message placeholder in state, then append each incoming chunk to that placeholder. This avoids rerendering the whole chat history on every token and keeps the UI smooth.

Troubleshooting: the response arrives only at the end

If the text appears all at once instead of streaming, check these first:

• You forgot stream mode. The request must explicitly enable streaming.
• Your proxy is buffering. Some serverless setups, reverse proxies, or compression middleware hold chunks until the response ends.
• You are parsing JSON too early. Streaming responses often arrive as SSE-style lines, not one complete JSON object.
• Your browser code expects the wrong format. Many OpenAI-compatible endpoints send data lines and a final [DONE] marker.

If you are using Next.js or another React framework, verify that your API route returns chunks immediately and does not rewrite the body. If your backend forwards the stream, make sure it uses chunked transfer and does not wait for the full model output before responding.

Troubleshooting: partial text, repeated text, or broken words

Another common issue is updating React state with the full accumulated string from every chunk. That can cause duplicated text if the provider already sends the whole completion-so-far. The fix is to understand the stream format and only append the delta that is new.

For line-based streams, keep a small buffer for incomplete lines. A token may be split across network packets, so one chunk can end halfway through a JSON fragment. Decode incrementally, wait until you have a complete line, then parse it. This is especially important when the model is fast and chunks are tiny.

If words appear cut off, the issue is usually the UI, not the model. React is rendering exactly what you append. Use a single source of truth for the assistant message, and update that message atomically instead of creating a new message object on every chunk.

FAQ: what developers ask most

Should I use SSE or fetch streams? For browser apps, both can work. SSE is simple for one-way output, while fetch streams give you more control. If you already use an OpenAI-compatible API, fetch with ReadableStream is usually the easiest path in React.

Do I need a special SDK for 59API? No. Since 59API is compatible with any OpenAI SDK, you can keep your existing request style and just point the base URL to https://api.59api.com. That makes migration and testing much faster.

How do I keep costs down while testing streaming? Use a relay with low pay-as-you-go pricing, choose the smallest model that fits the task, and stop generations as soon as you have enough text. 59API is a strong option here because it is among the cheapest relays and offers a referral rebate, which helps teams stretch experimentation budgets.

Why not just use the cheapest model everywhere? For customer-facing chat, support, or coding tools, model quality matters. A relay like 59API gives you native official-quality models without a downgrade, so you can optimize cost without trading away output quality.

Bottom line

Streaming LLM responses in React is mostly about handling bytes correctly: enable streaming, read incrementally, append deltas, and avoid buffering in your proxy. Once that is in place, the UX feels dramatically faster and more polished.

If you want to build that experience without paying premium relay prices, sign up for 59API and test your React streaming flow with cheap, pay-as-you-go access to Claude and GPT models.

Precios · Docs