fix: sync bug

src/hooks/DebouncedCallback.js

@@ -13,5 +13,11 @@ export function useDebouncedCallback(callback, delay) {
     [delay]
   );
 
+  useEffect(() => {
+    return () => {
+      debouncedCallback.cancel();
+    };
+  }, [debouncedCallback]);
+
   return debouncedCallback;
 }

src/hooks/Setting.js

@@ -25,13 +25,17 @@ const SettingContext = createContext({
   reloadSetting: () => {},
 });
 
-export function SettingProvider({ children }) {
+export function SettingProvider({ children, isSettingPage }) {
   const {
     data: setting,
     isLoading,
     update,
     reload,
-  } = useStorage(STOKEY_SETTING, DEFAULT_SETTING, KV_SETTING_KEY);
+  } = useStorage(
+    STOKEY_SETTING,
+    DEFAULT_SETTING,
+    isSettingPage ? KV_SETTING_KEY : ""
+  );
 
   useEffect(() => {
     if (typeof setting?.darkMode === "boolean") {
@@ -43,6 +47,8 @@ export function SettingProvider({ children }) {
   }, [setting?.darkMode, update]);
 
   useEffect(() => {
+    if (!isSettingPage) return;
+
     (async () => {
       try {
         logger.setLevel(setting?.logLevel);
@@ -53,7 +59,7 @@ export function SettingProvider({ children }) {
         logger.error("Failed to fetch log level, using default.", error);
       }
     })();
-  }, [setting]);
+  }, [isSettingPage, setting?.logLevel]);
 
   const updateSetting = useCallback(
     (objOrFn) => {

src/libs/log.js

@@ -62,10 +62,12 @@ class Logger {
       return;
     }
 
-    this.config.level = newLevelObject;
+    if (this.config.level.value !== newLevelObject.value) {
-    console.log(
+      this.config.level = newLevelObject;
-      `[${this.config.prefix}] Log level dynamically set to ${this.config.level.name}`
+      console.log(
-    );
+        `[${this.config.prefix}] Log level dynamically set to ${this.config.level.name}`
+      );
+    }
   }
 
   /**

src/libs/utils.js

@@ -59,14 +59,21 @@ export const sleep = (delay) =>
  */
 export const debounce = (func, delay = 200) => {
   let timer = null;
-  return (...args) => {
+
+  const debouncedFunc = (...args) => {
     timer && clearTimeout(timer);
     timer = setTimeout(() => {
       func(...args);
-      clearTimeout(timer);
       timer = null;
     }, delay);
   };
+
+  debouncedFunc.cancel = () => {
+    clearTimeout(timer);
+    timer = null;
+  };
+
+  return debouncedFunc;
 };
 
 /**

src/views/Options/index.js

@@ -99,7 +99,7 @@ export default function Options() {
   }
 
   return (
-    <SettingProvider>
+    <SettingProvider isSettingPage={true}>
       <ThemeProvider>
         <AlertProvider>
           <ConfirmProvider>