From eef934b631af501f5b0fe271833ff468b2d13b93 Mon Sep 17 00:00:00 2001
From: abhithesys <abhishek@thesys.dev>
Date: Sat, 28 Mar 2026 15:51:40 +0530
Subject: [PATCH] fix: debounce streamed message updates with RAF to prevent
 React max update depth error

---
 .../src/stream/processStreamedMessage.ts       | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/react-headless/src/stream/processStreamedMessage.ts b/packages/react-headless/src/stream/processStreamedMessage.ts
index 5c59da1d5..567e358bf 100644
--- a/packages/react-headless/src/stream/processStreamedMessage.ts
+++ b/packages/react-headless/src/stream/processStreamedMessage.ts
@@ -35,6 +35,15 @@ export const processStreamedMessage = async ({
 
   let isFirst = true;
 
+  let rafId: number | null = null;
+  const debouncedUpdate = (msg: AssistantMessage) => {
+    if (rafId !== null) cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(() => {
+      updateMessage(msg);
+      rafId = null;
+    });
+  };
+
   for await (const event of adapter.parse(response)) {
     switch (event.type) {
       case EventType.TEXT_MESSAGE_CONTENT:
@@ -101,9 +110,16 @@ export const processStreamedMessage = async ({
       createMessage(currentMessage);
       isFirst = false;
     } else {
-      updateMessage(currentMessage);
+      // debounce the message update using raf
+      debouncedUpdate(currentMessage);
     }
   }
 
+  if (rafId !== null) {
+    // flush any update
+    cancelAnimationFrame(rafId);
+    updateMessage(currentMessage);
+  }
+
   return currentMessage;
 };