--- title: Build a Streaming React Chat with Microsoft Foundry... description: 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... canonical: https://daily.dev/posts/build-a-streaming-react-chat-with-microsoft-foundry-responses-ivna1fo2f twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Build a Streaming React Chat with Microsoft Foundry Responses | daily.dev og:description: 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... og:url: https://daily.dev/posts/build-a-streaming-react-chat-with-microsoft-foundry-responses-ivna1fo2f og:image: https://api.daily.dev/og/posts/iVNa1FO2F.png og:image:alt: Build a Streaming React Chat with Microsoft Foundry Responses og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Build a Streaming React Chat with Microsoft Foundry Responses **[C\# Corner](https://daily.dev/sources/csharpcorner)** · 7 min read · 2 upvotes · 0 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions 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._ ## Similar posts on daily.dev - [Streaming AI Text In React Native Without The Stutter](https://daily.dev/posts/streaming-ai-text-in-react-native-without-the-stutter-utvxfyez8) · Medium · 5 upvotes · 0 comments - [Streaming JSON in just 200 lines of JavaScript – Frontend Masters Blog](https://daily.dev/posts/streaming-json-in-just-200-lines-of-javascript-frontend-masters-blog-yyfhp6ohw) · Frontend Masters · 0 upvotes · 0 comments - [Streaming Backends & React: Controlling Re-render Chaos in High-Frequency Data](https://daily.dev/posts/streaming-backends-react-controlling-re-render-chaos-in-high-frequency-data-lvkyfw1pt) · SitePoint · 0 upvotes · 0 comments - [Javascript Fatigue: HTMX Is All You Need to Build ChatGPT — Part 2](https://daily.dev/posts/javascript-fatigue-htmx-is-all-you-need-to-build-chatgpt-part-2-a0wwhamye) · Towards Data Science · 0 upvotes · 0 comments - [Issue \#472: How React streams UI out of order — React Status](https://daily.dev/posts/issue-472-how-react-streams-ui-out-of-order-react-status-qtof0pa7s) · React Status · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#react](https://daily.dev/tags/react), [#server-sent-events](https://daily.dev/tags/server-sent-events) [View this post on daily.dev](https://daily.dev/posts/build-a-streaming-react-chat-with-microsoft-foundry-responses-ivna1fo2f) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Build a Streaming React Chat with Microsoft Foundry Responses","url":"https://daily.dev/posts/build-a-streaming-react-chat-with-microsoft-foundry-responses-ivna1fo2f","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/build-a-streaming-react-chat-with-microsoft-foundry-responses-ivna1fo2f"},"datePublished":"2026-10-26T02:45:28.406Z","dateModified":"2026-10-26T02:56:25.566Z","description":"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...","image":"https://media.daily.dev/image/upload/s--CxzD6vbw--/f_auto/v1722860399/public/Placeholder%2005","thumbnailUrl":"https://media.daily.dev/image/upload/s--CxzD6vbw--/f_auto/v1722860399/public/Placeholder%2005","isAccessibleForFree":true,"articleSection":"C# Corner","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"C# Corner","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/ada2d584df6241748fc4e71878dc70a3","url":"https://daily.dev/sources/csharpcorner"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/build-a-streaming-react-chat-with-microsoft-foundry-responses-ivna1fo2f","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,react,server-sent-events","timeRequired":"PT7M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"C# Corner","item":"https://daily.dev/sources/csharpcorner"},{"@type":"ListItem","position":3,"name":"Build a Streaming React Chat with Microsoft Foundry Responses"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/build-a-streaming-react-chat-with-microsoft-foundry-responses-ivna1fo2f#faq","mainEntity":[{"@type":"Question","name":"How do I parse server-sent events in a React Fetch stream without losing partial UTF-8 characters or split JSON payloads?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"How do I stop a React chat UI from showing a response after the user cancels the request or signs out?","acceptedAnswer":{"@type":"Answer","text":"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."}}]} ```