From 480bac98dfa1df331087444aae51b4daf0f482b3 Mon Sep 17 00:00:00 2001
From: Masen Furer <m_github@0x26.net>
Date: Fri, 31 Jan 2025 14:47:28 -0800
Subject: [PATCH] separate socket connection from event loop

---
 reflex/.templates/web/utils/state.js | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/reflex/.templates/web/utils/state.js b/reflex/.templates/web/utils/state.js
index 6a5e53c67..c1c467555 100644
--- a/reflex/.templates/web/utils/state.js
+++ b/reflex/.templates/web/utils/state.js
@@ -805,12 +805,8 @@ export const useEventLoop = (
     };
   }, []);
 
-  // Main event loop.
+  // Handle socket connect/disconnect.
   useEffect(() => {
-    // Skip if the router is not ready.
-    if (!router.isReady) {
-      return;
-    }
     // only use websockets if state is present
     if (Object.keys(initialState).length > 1) {
       // Initialize the websocket connection.
@@ -820,15 +816,9 @@ export const useEventLoop = (
           dispatch,
           ["websocket"],
           setConnectErrors,
-          client_storage
+          client_storage,
         );
       }
-      (async () => {
-        // Process all outstanding events.
-        while (event_queue.length > 0 && !event_processing) {
-          await processEvent(socket.current);
-        }
-      })();
     }
 
     // Cleanup function.
@@ -839,6 +829,20 @@ export const useEventLoop = (
     };
   }, []);
 
+  // Main event loop.
+  useEffect(() => {
+    // Skip if the router is not ready.
+    if (!router.isReady) {
+      return;
+    }
+    (async () => {
+      // Process all outstanding events.
+      while (event_queue.length > 0 && !event_processing) {
+        await processEvent(socket.current);
+      }
+    })();
+  });
+
   // localStorage event handling
   useEffect(() => {
     const storage_to_state_map = {};