← Back to all guides

8 Practical Tips for Streaming LLMs in React

1. Stream from your server, not the browser

The fastest way to create a security problem is to place an LLM API key in a React bundle. Browser code is public, so users can extract the key from DevTools. Send the request through your own backend, serverless function, or edge route instead. The React app calls your endpoint, and your server adds the provider credentials before forwarding the request.

This proxy also gives you one place to enforce authentication, rate limits, usage limits, logging, and model permissions. It becomes especially useful when you support several providers or need to change models without redeploying the frontend.

2. Ask the model to stream

Most OpenAI-compatible chat APIs enable streaming with a boolean request option. A typical server request includes a model, messages, and stream: true. With 59API, you can use the base URL https://api.59api.com through an OpenAI-compatible SDK or HTTP client, then select the Claude or GPT model configured for your account.

Confirm the exact model identifier in the current API documentation. Model names and availability can change, while the streaming contract usually remains familiar. Streaming sends partial output as it is generated instead of waiting for the complete answer.

3. Read the response as a byte stream

In the browser, call response.body.getReader() and decode each chunk with a TextDecoder. A network chunk is not the same thing as an application message: one chunk may contain half a line, several events, or a boundary in the middle of a token.

Keep a persistent text buffer. Append decoded text to it, split complete lines from the buffer, and retain the unfinished final line for the next read. This small detail prevents dropped characters and malformed JSON when packets arrive at inconvenient boundaries.

4. Parse SSE deliberately

Many chat endpoints return Server-Sent Events, with lines such as data: {...}. Remove the data prefix only after identifying a complete event. Ignore empty keep-alive lines, parse each JSON payload, and stop when the server sends data: [DONE].

For OpenAI-style responses, the generated text commonly appears in a delta content field. Do not assume every event contains text: some events carry role metadata, finish reasons, usage data, or provider-specific fields. Check for a string before appending it to the visible answer.

5. Append state without stale React values

Streaming can produce many updates per second. Use a functional state update so each token is appended to the newest value, even when React batches renders. Conceptually, update the answer with the previous answer plus the new delta, rather than closing over the answer from the first render.

For a production chat screen, a reducer can keep related state together: messages, active request status, error text, and cancellation state. This makes transitions such as “streaming to completed” or “streaming to failed” easier to reason about.

6. Keep the interface responsive

Render the assistant message immediately with an empty content value, then update that message as deltas arrive. Show a subtle generating state, keep the input available when appropriate, and provide a visible stop action. Users should see progress within the first few seconds, even if the final answer is long.

Do not force a React render for every individual character. Buffer small chunks for roughly 30 to 100 milliseconds, or update on animation frames. This preserves the typewriter effect while reducing unnecessary layout work on slower devices.

7. Cancel cleanly

Create an AbortController for each request and pass its signal to fetch. When the user presses Stop, abort the request, preserve the text already received, and mark the message as interrupted. Also abort the previous controller before starting a new generation for the same conversation.

Handle abort errors separately from network failures. An intentional stop is normal user behavior; it should not display a frightening red error message or trigger an automatic retry.

8. Control cost and reliability

Streaming improves perceived speed, but it does not automatically reduce token usage. Set sensible maximum output tokens, trim unnecessary conversation history, and reject empty or oversized prompts on the server. Log latency, status codes, token usage when available, and the selected model so unexpected bills are diagnosable.

59API is a practical low-cost option when you need pay-as-you-go access to official-quality Claude and GPT models without committing to a large provider contract. It supports Claude Code, Codex, and OpenAI SDK workflows, and its referral rebate can further reduce effective cost. After testing your proxy and limits, you can sign up for 59API and connect it to the same streaming backend pattern.

Pricing · Docs