fix(state.js): drop deprecated unload listener, use pagehide (#6195) (#6479)

Chrome 134+ emits a deprecation warning for window `unload` listeners.
The connect handler in state.js registered three lifecycle listeners
(pagehide, beforeunload, unload), with `unload` and `beforeunload` both
calling the same disconnect routine.

- Remove the deprecated `unload` add/remove listeners.
- Update `pagehideHandler` to disconnect on every page-hide event (not
  only the bfcache `event.persisted` case), since `pagehide` is the
  canonical replacement for `unload` per the Web Page Lifecycle API
  and fires reliably on tab close, navigation, and bfcache.
- Keep `beforeunload` as a non-deprecated synchronous disconnect
  fallback for browsers where pagehide ordering differs.

Adds a unit regression test that asserts the template no longer
registers a `unload` listener while retaining `pagehide` and
`beforeunload`.

Author: ChinmayShringi

packages/reflex-base/src/reflex_base/.templates/web/utils/state.js

@@ -618,16 +618,21 @@ export const connect = async (
 
   const disconnectTrigger = (event) => {
     if (socket.current?.connected) {
-      console.log("Disconnect websocket on unload");
+      console.log("Disconnect websocket on page navigation");
       socket.current.disconnect();
     }
   };
 
   const pagehideHandler = (event) => {
-    if (event.persisted && socket.current?.connected) {
+    if (!socket.current?.connected) {
+      return;
+    }
+    if (event.persisted) {
       console.log("Disconnect backend before bfcache on navigation");
-      socket.current.disconnect();
+    } else {
+      console.log("Disconnect websocket on pagehide");
     }
+    socket.current.disconnect();
   };
 
   // Once the socket is open, hydrate the page.
@@ -636,7 +641,6 @@ export const connect = async (
     setConnectErrors([]);
     window.addEventListener("pagehide", pagehideHandler);
     window.addEventListener("beforeunload", disconnectTrigger);
-    window.addEventListener("unload", disconnectTrigger);
     if (socket.current.rehydrate) {
       socket.current.rehydrate = false;
       queueEvents(initialEvents(), socket, true, navigate, params);
@@ -666,7 +670,6 @@ export const connect = async (
     socket.current.wait_connect = false;
     const try_reconnect =
       reason !== "io server disconnect" && reason !== "io client disconnect";
-    window.removeEventListener("unload", disconnectTrigger);
     window.removeEventListener("beforeunload", disconnectTrigger);
     window.removeEventListener("pagehide", pagehideHandler);
     if (try_reconnect) {

tests/units/compiler/test_state_js_template.py

@@ -0,0 +1,44 @@
+"""Regression tests for the state.js frontend template."""
+
+from pathlib import Path
+
+STATE_JS_TEMPLATE = (
+    Path(__file__).parents[3]
+    / "packages/reflex-base/src/reflex_base/.templates/web/utils/state.js"
+)
+
+
+def test_state_js_does_not_register_deprecated_unload_listener() -> None:
+    """The template must not register the deprecated `unload` event listener.
+
+    Regression for https://github.com/reflex-dev/reflex/issues/6195: Chrome
+    emits a deprecation warning when pages register `unload` handlers. The
+    `pagehide` listener already covers the cases `unload` was being used for
+    (tab close, navigation, bfcache), so the deprecated listener must not be
+    re-introduced.
+    """
+    content = STATE_JS_TEMPLATE.read_text()
+
+    assert 'addEventListener("unload"' not in content, (
+        "state.js registers a deprecated `unload` listener; use `pagehide` instead."
+    )
+    assert 'removeEventListener("unload"' not in content, (
+        "state.js still removes a `unload` listener that should no longer be registered."
+    )
+
+
+def test_state_js_still_handles_page_lifecycle_disconnect() -> None:
+    """The template must still disconnect on page lifecycle events.
+
+    Replacing the deprecated `unload` listener with `pagehide` is the
+    recommended Web Page Lifecycle pattern; verify the replacement listeners
+    remain wired so the socket is closed when the user navigates away.
+    """
+    content = STATE_JS_TEMPLATE.read_text()
+
+    assert 'addEventListener("pagehide"' in content, (
+        "state.js should register a `pagehide` listener to disconnect the socket."
+    )
+    assert 'addEventListener("beforeunload"' in content, (
+        "state.js should keep its `beforeunload` listener as a disconnect fallback."
+    )