react-realtime-hooks 2.0.1 → 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;
@@ -1232,10 +1239,12 @@ var useWebSocket = (options) => {
     controller.noteUserCloseRequested();
     reconnect.cancel();
     heartbeat.stop();
+    const socket2 = socketRef.current;
+    const hasInFlightSocket = socket2 !== null && (socket2.readyState === WebSocket.CONNECTING || socket2.readyState === WebSocket.OPEN);
     commitState((current) => ({
       ...current,
       lastChangedAt: Date.now(),
-      status: "closing"
+      status: hasInFlightSocket ? "closing" : "closed"
     }));
     closeSocket({
       code,
@@ -1299,12 +1308,21 @@ var useWebSocket = (options) => {
       status: reconnect.status === "running" || reconnect.status === "scheduled" ? "reconnecting" : "connecting"
     }));
     let cancelled = false;
-    let detachListeners = null;
     queueMicrotask(() => {
       if (cancelled) {
         return;
       }
+      if (controller.hasManualCloseRequested()) {
+        commitState((current) => ({
+          ...current,
+          lastChangedAt: Date.now(),
+          status: "closed"
+        }));
+        return;
+      }
       const socket2 = new WebSocket(resolvedUrl, protocols);
+      detachSocketListenersRef.current?.();
+      detachSocketListenersRef.current = null;
       const socketEpoch = nextSocketEpochRef.current + 1;
       socketRef.current = socket2;
       socketKeyRef.current = nextSocketKey;
@@ -1338,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);
@@ -1347,7 +1365,6 @@ var useWebSocket = (options) => {
     });
     return () => {
       cancelled = true;
-      detachListeners?.();
     };
   }, [
     closeSocket,
@@ -1368,6 +1385,8 @@ var useWebSocket = (options) => {
     supported
   ]);
   react.useEffect(() => () => {
+    detachSocketListenersRef.current?.();
+    detachSocketListenersRef.current = null;
     controller.noteEffectInitiatedClose();
     socketKeyRef.current = null;
     activeSocketEpochRef.current = null;
@@ -1512,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);
@@ -1549,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) => {
@@ -1719,11 +1741,18 @@ var useEventSource = (options) => {
       status: reconnect.status === "running" || reconnect.status === "scheduled" ? "reconnecting" : "connecting"
     }));
     let cancelled = false;
-    let detachListeners = null;
     queueMicrotask(() => {
       if (cancelled) {
         return;
       }
+      if (manualCloseRef.current) {
+        commitState((current) => ({
+          ...current,
+          lastChangedAt: Date.now(),
+          status: "closed"
+        }));
+        return;
+      }
       const source = new EventSource(resolvedUrl, {
         withCredentials: options.withCredentials ?? false
       });
@@ -1761,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) {
@@ -1772,7 +1801,6 @@ var useEventSource = (options) => {
     });
     return () => {
       cancelled = true;
-      detachListeners?.();
     };
   }, [
     closeEventSource,
@@ -1791,6 +1819,8 @@ var useEventSource = (options) => {
     supported
   ]);
   react.useEffect(() => () => {
+    detachEventSourceListenersRef.current?.();
+    detachEventSourceListenersRef.current = null;
     suppressReconnectRef.current = true;
     eventSourceKeyRef.current = null;
     activeEventSourceEpochRef.current = null;