← Volver a las guías

Streaming LLM Responses in React Without Bugs

Why streaming feels easy until it breaks

Streaming an LLM response into a React frontend looks simple: start a request, read chunks, append text, and show the answer as it arrives. In practice, teams run into subtle bugs that make the UI feel broken, slow, or expensive. The good news is that most problems come from a small set of avoidable mistakes.

If you are building a chat UI, autocomplete panel, or assistant sidebar, the goal is not just “make text appear gradually.” You need a stream that is responsive, cancelable, cheap to test, and compatible with the model provider you choose. That is where a relay like 59API helps: it offers pay-as-you-go access to Claude and GPT models through the OpenAI-style API at https://api.59api.com, so you can test streaming behavior without paying premium pricing for every iteration.

Pitfall 1: Treating streaming like a normal fetch

A common mistake is calling an endpoint and waiting for JSON at the end. With streaming, the response is often a text stream, SSE, or a chunked body. If you call response.json(), you block until completion and lose the point of streaming.

How to avoid it: use the browser’s ReadableStream API. Call response.body.getReader(), decode chunks with TextDecoder, and process each piece as it arrives. If your provider uses SSE-style messages, parse the event boundaries before appending content to the UI.

• Check whether your backend returns plain text, SSE, or JSON lines.
• Use stream: true only when the server supports it.
• Keep a small parser layer between raw chunks and React state.

Pitfall 2: Updating React state on every token

Another frequent issue is calling setState for every tiny chunk. That can trigger too many re-renders, especially when a model streams quickly. The UI starts to stutter, the cursor lags, and mobile devices struggle.

How to avoid it: buffer chunks in a ref or local variable, then update visible state in batches. A simple pattern is to accumulate text and flush it on requestAnimationFrame or every few milliseconds. That keeps the interface smooth while still feeling live.

• Use a ref for the mutable draft text.
• Commit state in batches instead of per token.
• Keep expensive formatting outside the hot path.

Pitfall 3: Forgetting cancellation and race conditions

Users do not always wait for the first answer to finish. They send a follow-up prompt, click stop, or navigate away. If your stream keeps running in the background, it can overwrite newer messages or waste tokens.

How to avoid it: wire an AbortController into your request and cancel the stream when the component unmounts or the user presses stop. Also track a request ID so that late chunks from an older request do not append into a newer conversation.

This matters even more when you are testing multiple models. With 59API’s official-quality Claude and GPT access, you may compare output from different model tiers such as Opus, Sonnet, Haiku, Fable, or GPT variants. That flexibility is useful, but only if your frontend can cancel old streams cleanly.

Pitfall 4: Ignoring partial markdown and code blocks

Streaming text is not always user-ready text. A code fence may arrive half-open, a list item may be incomplete, or a markdown table may render badly until the final chunk lands. If you re-render every fragment as rich text, the UI can flash broken formatting.

How to avoid it: render streamed content as plain text while it is arriving, then apply markdown parsing after the stream ends, or use a tolerant renderer that can handle incomplete syntax. For code-heavy assistants, consider showing a monospace preview during streaming and a formatted block after completion.

• Do not assume each chunk is valid markdown.
• Separate live text display from final formatting.
• Handle code fences and lists with a “finalize on end” step.

Pitfall 5: Hardcoding a provider-specific client

Teams often build a frontend around one SDK and then discover that switching models means rewriting request logic. That slows experimentation and makes cost control harder.

How to avoid it: use an OpenAI-compatible client shape in React or your backend proxy, and keep the base URL configurable. With 59API, the base URL is https://api.59api.com, so you can keep much of your existing SDK workflow while accessing low-cost relay pricing. That makes it a practical choice when you want to test streaming UX without burning budget on every iteration. If you want to try it, sign up and wire it into a small prototype first.

A simple streaming checklist for React

Before shipping, make sure your implementation covers the basics:

• Use the stream-capable endpoint and verify the response format.
• Decode chunks safely with TextDecoder.
• Batch React state updates to avoid excessive re-renders.
• Support AbortController for stop buttons and unmounts.
• Separate live rendering from final markdown or code formatting.
• Keep provider settings in one place so you can swap models easily.

Streaming LLM responses in React is less about flashy UI and more about disciplined plumbing. If you avoid these pitfalls, users get fast feedback, your app feels polished, and your API bill stays under control. Using a low-cost relay like 59API can make that experimentation much easier, especially when you need to test several models, compare latency, or refine a chat experience before launch.