Finish feature/27

novajslabs · Jan 8, 2025 · 766a46a · 766a46a
2 parents c68afef + a47e39d
commit 766a46a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 28 deletions.
diff --git a/snippets/js.code-snippets b/snippets/js.code-snippets
@@ -1009,26 +1009,26 @@
   "useOffline": {
     "prefix": "useOffline",
     "body": [
-      "import { useEffect, useState } from 'react';",
+      "import { useSyncExternalStore } from 'react';",
       "",
       "export const useOffline = () => {",
-      "  const [offline, setOffline] = useState(null);",
+      "  const getSnapshot = () => !navigator.onLine;",
       "",
-      "  useEffect(() => {",
-      "    const handleNetworkState = () => {",
-      "      setOffline(!offline);",
-      "    };",
-      "    addEventListener('offline', handleNetworkState);",
-      "    addEventListener('online', handleNetworkState);",
+      "  const subscribe = (callback) => {",
+      "    const handleNetworkChange = () => callback();",
+      "",
+      "    window.addEventListener('online', handleNetworkChange);",
+      "    window.addEventListener('offline', handleNetworkChange);",
       "",
       "    return () => {",
-      "      removeEventListener('online', handleNetworkState);",
-      "      removeEventListener('offline', handleNetworkState);",
+      "      window.removeEventListener('online', handleNetworkChange);",
+      "      window.removeEventListener('offline', handleNetworkChange);",
       "    };",
-      "  }, [offline]);",
+      "  };",
       "",
-      "  return !!offline;",
-      "};"
+      "  return useSyncExternalStore(subscribe, getSnapshot);",
+      "};",
+      ""
     ],
     "description": "Reaction hook to track if user is offline or not"
   },

diff --git a/snippets/ts.code-snippets b/snippets/ts.code-snippets
@@ -1098,28 +1098,26 @@
   "useOffline": {
     "prefix": "useOffline",
     "body": [
-      "import { useEffect, useState } from 'react';",
+      "import { useSyncExternalStore } from 'react';",
       "",
-      "type TUseOffline = () => boolean;",
+      "export const useOffline = () => {",
+      "  const getSnapshot = () => !navigator.onLine;",
       "",
-      "export const useOffline: TUseOffline = () => {",
-      "  const [offline, setOffline] = useState<boolean | null>(null);",
+      "  const subscribe = (callback: () => void) => {",
+      "    const handleNetworkChange = () => callback();",
       "",
-      "  useEffect(() => {",
-      "    const handleNetworkState = () => {",
-      "      setOffline(!offline);",
-      "    };",
-      "    addEventListener('offline', handleNetworkState);",
-      "    addEventListener('online', handleNetworkState);",
+      "    window.addEventListener('online', handleNetworkChange);",
+      "    window.addEventListener('offline', handleNetworkChange);",
       "",
       "    return () => {",
-      "      removeEventListener('online', handleNetworkState);",
-      "      removeEventListener('offline', handleNetworkState);",
+      "      window.removeEventListener('online', handleNetworkChange);",
+      "      window.removeEventListener('offline', handleNetworkChange);",
       "    };",
-      "  }, [offline]);",
+      "  };",
       "",
-      "  return !!offline;",
-      "};"
+      "  return useSyncExternalStore(subscribe, getSnapshot);",
+      "};",
+      ""
     ],
     "description": "Reaction hook to track if user is offline or not"
   },