react-realtime-hooks 2.0.2 → 2.0.3

package/README.md

@@ -8,6 +8,7 @@
 [![license](https://img.shields.io/npm/l/react-realtime-hooks)](https://github.com/volkov85/react-realtime-hooks/blob/main/LICENSE)
 [![TypeScript](https://img.shields.io/badge/TypeScript-typed-3178c6)](https://www.typescriptlang.org/)
 [![react](https://img.shields.io/badge/react-18%20%7C%2019-149eca)](https://www.npmjs.com/package/react)
+[![React Doctor](https://www.react.doctor/share/badge?p=react-realtime-hooks&s=94&e=2&w=28&f=21)](https://www.react.doctor/share?p=react-realtime-hooks&s=94&e=2&w=28&f=21)
 
 Production-ready React hooks for WebSocket and SSE with auto-reconnect, heartbeat, typed connection state, and browser network awareness including page visibility and connection gating.
 

package/dist/index.cjs

@@ -939,6 +939,7 @@ var useWebSocket = (options) => {
     [protocolsDependency]
   );
   const socketRef = react.useRef(null);
+  const detachSocketListenersRef = react.useRef(null);
   const socketKeyRef = react.useRef(null);
   const activeSocketEpochRef = react.useRef(null);
   const closingSocketEpochRef = react.useRef(null);
@@ -1051,6 +1052,10 @@ var useWebSocket = (options) => {
       socketKeyRef.current = null;
       activeSocketEpochRef.current = null;
       closingSocketEpochRef.current = config.trackClose ? socketEpoch : null;
+      if (!config.trackClose) {
+        detachSocketListenersRef.current?.();
+        detachSocketListenersRef.current = null;
+      }
       if (isSocketActive(socket2)) {
         socket2.close(config.code, config.reason);
       }
@@ -1162,6 +1167,8 @@ var useWebSocket = (options) => {
     if (!shouldHandleSocketClose(socketEpoch)) {
       return;
     }
+    detachSocketListenersRef.current?.();
+    detachSocketListenersRef.current = null;
     if (activeSocketEpochRef.current === socketEpoch) {
       socketRef.current = null;
       socketKeyRef.current = null;
@@ -1301,7 +1308,6 @@ var useWebSocket = (options) => {
       status: reconnect.status === "running" || reconnect.status === "scheduled" ? "reconnecting" : "connecting"
     }));
     let cancelled = false;
-    let detachListeners = null;
     queueMicrotask(() => {
       if (cancelled) {
         return;
@@ -1315,6 +1321,8 @@ var useWebSocket = (options) => {
         return;
       }
       const socket2 = new WebSocket(resolvedUrl, protocols);
+      detachSocketListenersRef.current?.();
+      detachSocketListenersRef.current = null;
       const socketEpoch = nextSocketEpochRef.current + 1;
       socketRef.current = socket2;
       socketKeyRef.current = nextSocketKey;
@@ -1348,7 +1356,7 @@ var useWebSocket = (options) => {
       socket2.addEventListener("message", handleSocketMessage);
       socket2.addEventListener("error", handleSocketError);
       socket2.addEventListener("close", handleSocketClose);
-      detachListeners = () => {
+      detachSocketListenersRef.current = () => {
         socket2.removeEventListener("open", handleSocketOpen);
         socket2.removeEventListener("message", handleSocketMessage);
         socket2.removeEventListener("error", handleSocketError);
@@ -1357,7 +1365,6 @@ var useWebSocket = (options) => {
     });
     return () => {
       cancelled = true;
-      detachListeners?.();
     };
   }, [
     closeSocket,
@@ -1378,6 +1385,8 @@ var useWebSocket = (options) => {
     supported
   ]);
   react.useEffect(() => () => {
+    detachSocketListenersRef.current?.();
+    detachSocketListenersRef.current = null;
     controller.noteEffectInitiatedClose();
     socketKeyRef.current = null;
     activeSocketEpochRef.current = null;
@@ -1522,6 +1531,7 @@ var useEventSource = (options) => {
     [eventsDependency]
   );
   const eventSourceRef = react.useRef(null);
+  const detachEventSourceListenersRef = react.useRef(null);
   const eventSourceKeyRef = react.useRef(null);
   const activeEventSourceEpochRef = react.useRef(null);
   const nextEventSourceEpochRef = react.useRef(0);
@@ -1559,6 +1569,8 @@ var useEventSource = (options) => {
     eventSourceRef.current = null;
     eventSourceKeyRef.current = null;
     activeEventSourceEpochRef.current = null;
+    detachEventSourceListenersRef.current?.();
+    detachEventSourceListenersRef.current = null;
     source.close();
   });
   const isActiveEventSourceEvent = useStableCallback((sourceEpoch) => {
@@ -1729,7 +1741,6 @@ var useEventSource = (options) => {
       status: reconnect.status === "running" || reconnect.status === "scheduled" ? "reconnecting" : "connecting"
     }));
     let cancelled = false;
-    let detachListeners = null;
     queueMicrotask(() => {
       if (cancelled) {
         return;
@@ -1779,7 +1790,7 @@ var useEventSource = (options) => {
         source.addEventListener(eventName, handler);
       }
       source.addEventListener("error", handleSourceError);
-      detachListeners = () => {
+      detachEventSourceListenersRef.current = () => {
         source.removeEventListener("open", handleSourceOpen);
         source.removeEventListener("message", handleSourceMessage);
         for (const [eventName, handler] of namedEventHandlers) {
@@ -1790,7 +1801,6 @@ var useEventSource = (options) => {
     });
     return () => {
       cancelled = true;
-      detachListeners?.();
     };
   }, [
     closeEventSource,
@@ -1809,6 +1819,8 @@ var useEventSource = (options) => {
     supported
   ]);
   react.useEffect(() => () => {
+    detachEventSourceListenersRef.current?.();
+    detachEventSourceListenersRef.current = null;
     suppressReconnectRef.current = true;
     eventSourceKeyRef.current = null;
     activeEventSourceEpochRef.current = null;