Streaming a Microsoft Foundry Responses chat into React needs more than appending raw chunks to a message. A chunk can contain half a JSON event, multiple events, or a split UTF-8 character, so the frontend must reconstruct events before rendering them. The approach uses three separate buffers: a TextDecoder for incomplete UTF-8, a line buffer for incomplete lines, and a data buffer that holds an event until its blank-line separator arrives. An isCurrent() check after awaited operations suppresses stale output after cancellation or a login change. The focused streaming-hook test selection passed all 21 tests, covering fragmented UTF-8, metadata, malformed payloads, and late callbacks after cancellation or token changes.
Table of contents
What supplies the streamUse Fetch for the authenticated POSTDecode bytes before parsing eventsQuestions this post answers
How do I parse server-sent events in a React Fetch stream without losing partial UTF-8 characters or split JSON payloads?
Use three separate buffers: a TextDecoder instance to preserve incomplete UTF-8 byte sequences across reads, a string buffer to hold incomplete lines until a newline arrives, and a dataLines array that accumulates consecutive 'data:' lines until a blank line signals the event boundary. Calling JSON.parse directly on raw chunks skips these boundaries and breaks on split events. Developers wiring SSE into React chat UIs can compare streaming parser patterns like this on daily.dev.
How do I stop a React chat UI from showing a response after the user cancels the request or signs out?
Check an isCurrent() function immediately after every awaited read and before dispatching state updates, comparing the AbortController status and the captured auth token against the current one. A pending promise can settle after cancellation, so aborting the request alone is not enough; the check must happen after each await and before updating chat state. Teams building cancellable streaming chat UIs can track lifecycle patterns like this on daily.dev.