Use useRef hook to track previous offline state

Author: jaygiang

packages/react-radfish/Application/index.jsx

@@ -1,18 +1,22 @@
 import { Toast } from "../alerts";
-import { createContext, useEffect, useContext } from "react";
+import { createContext, useEffect, useContext, useRef } from "react";
 import { useOfflineStatus, useToasts, dispatchToast } from "../hooks";
 
 const ApplicationContext = createContext();
 
 function ApplicationComponent(props) {
   const { toasts } = useToasts();
   const { isOffline } = useOfflineStatus();
+  const prevIsOffline = useRef(null);
 
   useEffect(() => {
-    if (!isOffline) {
-      dispatchToast({ message: "Application is online", status: "info", duration: 3000 });
-    }
-  }, [isOffline]);
+    if (prevIsOffline.current === null) {
+        prevIsOffline.current = isOffline;
+      } else if (prevIsOffline.current && !isOffline) {
+        dispatchToast({ message: "Application is online", status: "info", duration: 3000 });
+      }
+      prevIsOffline.current = isOffline;
+    }, [isOffline]);
 
   return (
     <div className="radfish__application">