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/setting/mods/network-interface-viewer.tsx

@@ -6,13 +6,11 @@ import { alpha, Box, Button, IconButton } from "@mui/material";
 import { ContentCopyRounded } from "@mui/icons-material";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { showNotice } from "@/services/noticeService";
+import useSWR from "swr";
 
 export const NetworkInterfaceViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
-  const [networkInterfaces, setNetworkInterfaces] = useState<
-    INetworkInterface[]
-  >([]);
   const [isV4, setIsV4] = useState(true);
 
   useImperativeHandle(ref, () => ({
@@ -22,12 +20,13 @@ export const NetworkInterfaceViewer = forwardRef<DialogRef>((props, ref) => {
     close: () => setOpen(false),
   }));
 
-  useEffect(() => {
-    if (!open) return;
-    getNetworkInterfacesInfo().then((res) => {
-      setNetworkInterfaces(res);
-    });
-  }, [open]);
+  const { data: networkInterfaces } = useSWR(
+    "clash-verge-rev-internal://network-interfaces",
+    getNetworkInterfacesInfo,
+    {
+      fallbackData: [], // default data before fetch
+    },
+  );
 
   return (
     <BaseDialog