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/backup-viewer.tsx

@@ -3,7 +3,7 @@ import {
   useImperativeHandle,
   useState,
   useCallback,
-  useEffect,
+  useMemo,
 } from "react";
 import { useTranslation } from "react-i18next";
 import { BaseDialog, DialogRef } from "@/components/base";
@@ -30,7 +30,6 @@ export const BackupViewer = forwardRef<DialogRef>((props, ref) => {
 
   const [isLoading, setIsLoading] = useState(false);
   const [backupFiles, setBackupFiles] = useState<BackupFile[]>([]);
-  const [dataSource, setDataSource] = useState<BackupFile[]>([]);
   const [total, setTotal] = useState(0);
   const [page, setPage] = useState(0);
 
@@ -91,14 +90,14 @@ export const BackupViewer = forwardRef<DialogRef>((props, ref) => {
       .sort((a, b) => (a.backup_time.isAfter(b.backup_time) ? -1 : 1));
   };
 
-  useEffect(() => {
-    setDataSource(
+  const dataSource = useMemo<BackupFile[]>(
+    () =>
       backupFiles.slice(
         page * DEFAULT_ROWS_PER_PAGE,
         page * DEFAULT_ROWS_PER_PAGE + DEFAULT_ROWS_PER_PAGE,
       ),
-    );
-  }, [page, backupFiles]);
+    [backupFiles, page],
+  );
 
   return (
     <BaseDialog
@@ -116,18 +115,10 @@ export const BackupViewer = forwardRef<DialogRef>((props, ref) => {
         <Paper elevation={2} sx={{ padding: 2 }}>
           <BackupConfigViewer
             setLoading={setIsLoading}
-            onBackupSuccess={async () => {
-              fetchAndSetBackupFiles();
-            }}
-            onSaveSuccess={async () => {
-              fetchAndSetBackupFiles();
-            }}
-            onRefresh={async () => {
-              fetchAndSetBackupFiles();
-            }}
-            onInit={async () => {
-              fetchAndSetBackupFiles();
-            }}
+            onBackupSuccess={fetchAndSetBackupFiles}
+            onSaveSuccess={fetchAndSetBackupFiles}
+            onRefresh={fetchAndSetBackupFiles}
+            onInit={fetchAndSetBackupFiles}
           />
           <Divider sx={{ marginY: 2 }} />
           <BackupTableViewer

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