refactor: use React in its intended way (#3963)

* refactor: replace `useEffect` w/ `useLocalStorage`

* refactor: replace `useEffect` w/ `useSWR`

* refactor: replace `useEffect` and `useSWR`. clean up `useRef`

* refactor: use `requestIdleCallback`

* refactor: replace `useEffect` w/ `useMemo`

* fix: clean up `useEffect`

* refactor: replace `useEffect` w/ `useSWR`

* refactor: remove unused `useCallback`

* refactor: enhance performance and memory management in frontend processes

* refactor: improve pre-push script structure and readability

---------

Co-authored-by: Tunglies <77394545+Tunglies@users.noreply.github.com>
Co-authored-by: Tunglies <tunglies.dev@outlook.com>

src/components/layout/layout-traffic.tsx

@@ -14,6 +14,7 @@ import useSWRSubscription from "swr/subscription";
 import { createAuthSockette } from "@/utils/websocket";
 import { useTranslation } from "react-i18next";
 import { isDebugEnabled, gc } from "@/services/api";
+import useSWR from "swr";
 
 interface MemoryUsage {
   inuse: number;
@@ -31,12 +32,15 @@ export const LayoutTraffic = () => {
 
   const trafficRef = useRef<TrafficRef>(null);
   const pageVisible = useVisibility();
-  const [isDebug, setIsDebug] = useState(false);
 
-  useEffect(() => {
-    isDebugEnabled().then((flag) => setIsDebug(flag));
-    return () => {};
-  }, [isDebug]);
+  const { data: isDebug } = useSWR(
+    "clash-verge-rev-internal://isDebugEnabled",
+    () => isDebugEnabled(),
+    {
+      // default value before is fetched
+      fallbackData: false,
+    },
+  );
 
   const { data: traffic = { up: 0, down: 0 } } = useSWRSubscription<
     ITrafficItem,