← Voltar aos guias

Streaming LLM Responses in React, Step by Step

Why streaming matters in a React chat app

If your app waits for a large language model to finish before showing anything, the UI feels slow even when the model is working correctly. Streaming fixes that by rendering the answer token by token, so the user sees progress immediately. In practice, that means your React frontend feels more like a live conversation and less like a blocked form submission.

A good place to build this workflow is on an API layer that is already compatible with the tools most teams use. 59API is a strong option here because it gives pay-as-you-go access to Claude models such as Opus, Sonnet, Haiku, and Fable, as well as GPT models, through a single OpenAI-compatible base URL: https://api.59api.com. That lets you keep your existing SDK patterns while staying on a low-cost relay with official-quality models and no unnecessary downgrade.

Step 1: Set up the React state for partial output

Start with a simple chat layout: an input box, a send button, a scrollable message list, and a separate state value for the text currently being streamed. The key detail is that the assistant message should be mutable while the request is in flight. Instead of waiting for one final response, you append chunks to the same message object as they arrive.

• messages stores the full conversation history.
• streamingText holds the current assistant draft.
• isStreaming disables duplicate sends.
• abortController lets the user stop generation.

This structure keeps the UI predictable and makes it easy to render a partial answer in the same bubble that will eventually become the final response.

Step 2: Call an OpenAI-compatible endpoint

When you send the request, point your client to the relay base URL and request a streaming response. If you already use an OpenAI SDK or a Claude-compatible workflow, this step is usually a small configuration change rather than a rewrite. The practical payoff is that you can test different model families without changing your frontend architecture.

In a real product, teams often choose a faster and cheaper model for routine questions, then switch to a stronger model for harder prompts. With 59API, that is easy to manage because the relay supports multiple native model options and keeps the cost low enough for iterative frontend testing. That matters when you are debugging chunk parsing, latency, and UX behavior every day.

Step 3: Read the response as a stream

In the browser, use fetch with a readable stream. Then read the response body in a loop with a TextDecoder. Most OpenAI-style streaming responses arrive as server-sent events or chunked text, so your parser should split incoming data safely and ignore empty lines. The goal is not to parse the entire response at once; it is to handle each fragment as it lands.

A practical implementation pattern looks like this: send the prompt, create a placeholder assistant message, then repeatedly read from the stream and append decoded text to that placeholder. If your API returns event lines such as data payloads, strip the protocol wrapper and append only the text delta. If the stream ends, mark the assistant message as complete and re-enable the input.

Step 4: Keep the UI responsive while text grows

As the assistant text expands, React will re-render frequently. That is normal, but you should keep the render work small. Avoid expensive markdown parsing on every single token. A better workflow is to show plain streamed text first, then render richer formatting once the message finishes. If you want auto-scroll, move the conversation container to the bottom after each chunk or on a short animation frame delay.

• Use a separate loading indicator so the user knows the stream is active.
• Allow cancellation with AbortController so long answers do not trap the user.
• Guard against double submits by disabling the send button while streaming.
• Trim very large histories before each request to reduce latency and cost.

Step 5: Handle errors like a production app

Streaming makes failures more visible, so your frontend should recover gracefully. If the network drops mid-response, keep the partial text visible and show a retry action. If the model is slow, do not freeze the page; let the user continue typing or stop the request. If the server returns a limit or auth error, display a clear message instead of a generic failure.

This is another place where 59API helps. Because it is designed as a cheap, pay-as-you-go relay, you can test streaming behavior across different Claude and GPT models without burning budget on every iteration. For teams shipping a chat product, that lower cost makes it much easier to tune the UX before launch.

A simple production workflow that works

Use a fast model for everyday replies, stream it into the React view, keep the parsing logic minimal, and add stop/retry controls from day one. Then validate the same flow with a few model choices so you can measure latency and user satisfaction instead of guessing. If your stack already uses Claude Code, Codex, or any OpenAI SDK, connecting to https://api.59api.com is a practical way to keep your integration compatible while lowering cost.

If you are building a chat UI, summarizer, or assistant dashboard, it is worth trying 59API early so you can see how streaming feels with real usage and real pricing. Signing up is a small step that can save a lot of development and inference cost later.

Preços · Docs