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/profile/groups-editor-viewer.tsx

@@ -48,6 +48,10 @@ import MonacoEditor from "react-monaco-editor";
 import { useThemeMode } from "@/services/states";
 import { Controller, useForm } from "react-hook-form";
 import { showNotice } from "@/services/noticeService";
+import {
+  requestIdleCallback,
+  cancelIdleCallback,
+} from "foxact/request-idle-callback";
 
 interface Props {
   proxiesUid: string;
@@ -195,11 +199,11 @@ export const GroupsEditorViewer = (props: Props) => {
           // 防止异常导致UI卡死
         }
       };
-      if (window.requestIdleCallback) {
-        window.requestIdleCallback(serialize);
-      } else {
-        setTimeout(serialize, 0);
-      }
+
+      const handle = requestIdleCallback(serialize);
+      return () => {
+        cancelIdleCallback(handle);
+      };
     }
   }, [prependSeq, appendSeq, deleteSeq]);