From 5cbf7da952a9ebaa1c987d9e2a0208e159da6e5c Mon Sep 17 00:00:00 2001
From: Masen Furer <m_github@0x26.net>
Date: Fri, 7 Jul 2023 12:58:13 -0700
Subject: [PATCH] state.js: accumulate incoming events (#1313)

If the backend yields multiple events from a single event handler, ensure that
each event gets appended to the pending result before being transferred to the
state. Previously each incoming event would overwrite any other pending
event(s) leading to racy and unpredictable behavior when yielding events from
the backend in quick succession.

Fixes #1309

Bonus Fix: when setting `processing: false` after client-side events (like
_console), spread from `result`, not `state` to avoid accumulating duplicate
queued events. I think this was originally an undiscovered bug that was exposed
by the main fix.
---
 reflex/.templates/web/utils/state.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/reflex/.templates/web/utils/state.js b/reflex/.templates/web/utils/state.js
index e91d42a27..9afb618db 100644
--- a/reflex/.templates/web/utils/state.js
+++ b/reflex/.templates/web/utils/state.js
@@ -234,7 +234,7 @@ export const processEvent = async (
 
   // If no event was sent, set processing to false.
   if (!eventSent) {
-    setResult({ ...state, final: true, processing: false });
+    setResult({ ...result, final: true, processing: false });
   }
 };
 
@@ -281,12 +281,12 @@ export const connect = async (
   socket.current.on("event", update => {
     update = JSON5.parse(update);
     applyDelta(state, update.delta);
-    setResult({
+    setResult(result => ({
       state: state,
-      events: update.events,
+      events: [...result.events, ...update.events],
       final: update.final,
       processing: true,
-    });
+    }));
   });
 };