diff --git a/reflex/.templates/web/utils/state.js b/reflex/.templates/web/utils/state.js
index f0051e582..51e8c6b8d 100644
--- a/reflex/.templates/web/utils/state.js
+++ b/reflex/.templates/web/utils/state.js
@@ -325,6 +325,17 @@ export const connect = async (
     autoUnref: false,
   });
 
+  function checkVisibility() {
+    if (document.visibilityState === "visible") {
+      if (!socket.current.connected) {
+        console.log("Socket is disconnected, attempting to reconnect ");
+        socket.current.connect();
+      } else {
+        console.log("Socket is reconnected ");
+      }
+    }
+  }
+
   // Once the socket is open, hydrate the page.
   socket.current.on("connect", () => {
     setConnectErrors([]);
@@ -345,6 +356,8 @@ export const connect = async (
       queueEvents(update.events, socket);
     }
   });
+
+  document.addEventListener("visibilitychange", checkVisibility);
 };
 
 /**