Refactor useNetworkState

Author: tylermcginnis

index.js

@@ -839,28 +839,32 @@ const getConnection = () => {
   );
 };
 
-export function useNetworkState() {
-  const cache = React.useRef({});
+const useNetworkStateSubscribe = (callback) => {
+  window.addEventListener("online", callback, { passive: true });
+  window.addEventListener("offline", callback, { passive: true });
 
-  const subscribe = React.useCallback((callback) => {
-    window.addEventListener("online", callback, { passive: true });
-    window.addEventListener("offline", callback, { passive: true });
+  const connection = getConnection();
 
-    const connection = getConnection();
+  if (connection) {
+    connection.addEventListener("change", callback, { passive: true });
+  }
+
+  return () => {
+    window.removeEventListener("online", callback);
+    window.removeEventListener("offline", callback);
 
     if (connection) {
-      connection.addEventListener("change", callback, { passive: true });
+      connection.removeEventListener("change", callback);
     }
+  };
+};
 
-    return () => {
-      window.removeEventListener("online", callback);
-      window.removeEventListener("offline", callback);
+const getNetworkStateServerSnapshot = () => {
+  throw Error("useNetworkState is a client-only hook");
+};
 
-      if (connection) {
-        connection.removeEventListener("change", callback);
-      }
-    };
-  }, []);
+export function useNetworkState() {
+  const cache = React.useRef({});
 
   const getSnapshot = () => {
     const online = navigator.onLine;
@@ -884,11 +888,11 @@ export function useNetworkState() {
     }
   };
 
-  const getServerSnapshot = () => {
-    throw Error("useNetworkState is a client-only hook");
-  };
-
-  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return React.useSyncExternalStore(
+    useNetworkStateSubscribe,
+    getSnapshot,
+    getNetworkStateServerSnapshot
+  );
 }
 
 export function useObjectState(initialValue) {