From a47e39d79fb7e91bc69e882dc3fa6677c39eb3ff Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Wed, 8 Jan 2025 10:02:37 -0500 Subject: [PATCH] feat: update useOffline hook #27 --- snippets/js.code-snippets | 26 +++++++++++++------------- snippets/ts.code-snippets | 28 +++++++++++++--------------- 2 files changed, 26 insertions(+), 28 deletions(-) diff --git a/snippets/js.code-snippets b/snippets/js.code-snippets index 405ce7c..46986b5 100644 --- 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 index 1288c0a..5fa1719 100644 --- 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(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" },