optimize settings store

src/renderer/features/settings/components/general/path-settings.tsx

@@ -1,22 +1,19 @@
 import { useQuery } from '@tanstack/react-query';
+import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
-import {
-    useCurrentServerId,
-    useGeneralSettings,
-    useSettingsStore,
-    useSettingsStoreActions,
-} from '/@/renderer/store';
+import { useCurrentServerId, useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Code } from '/@/shared/components/code/code';
 import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
+import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback';
 import { Played } from '/@/shared/types/domain-types';
 
-export const PathSettings = () => {
+export const PathSettings = memo(() => {
     const { t } = useTranslation();
     const serverId = useCurrentServerId();
     const randomSong = useQuery({
@@ -31,6 +28,37 @@ export const PathSettings = () => {
     const { pathReplace, pathReplaceWith } = useGeneralSettings();
     const { setSettings } = useSettingsStoreActions();
 
+    const [localPathReplace, setLocalPathReplace] = useState(pathReplace);
+    const [localPathReplaceWith, setLocalPathReplaceWith] = useState(pathReplaceWith);
+
+    useEffect(() => {
+        setLocalPathReplace(pathReplace);
+    }, [pathReplace]);
+
+    useEffect(() => {
+        setLocalPathReplaceWith(pathReplaceWith);
+    }, [pathReplaceWith]);
+
+    const debouncedSetPathReplace = useDebouncedCallback((value: string) => {
+        setSettings({
+            general: {
+                pathReplace: value,
+            },
+        });
+
+        randomSong.refetch();
+    }, 500);
+
+    const debouncedSetPathReplaceWith = useDebouncedCallback((value: string) => {
+        setSettings({
+            general: {
+                pathReplaceWith: value,
+            },
+        });
+
+        randomSong.refetch();
+    }, 500);
+
     return (
         <Stack>
             <Group>
@@ -50,34 +78,28 @@ export const PathSettings = () => {
             </Code>
             <Group grow>
                 <TextInput
-                    onChange={(e) =>
-                        setSettings({
-                            general: {
-                                ...useSettingsStore.getState().general,
-                                pathReplace: e.currentTarget.value,
-                            },
-                        })
-                    }
+                    onChange={(e) => {
+                        const value = e.currentTarget.value;
+                        setLocalPathReplace(value);
+                        debouncedSetPathReplace(value);
+                    }}
                     placeholder={t('setting.pathReplace_optionRemovePrefix', {
                         postProcess: 'sentenceCase',
                     })}
-                    value={pathReplace}
+                    value={localPathReplace}
                 />
                 <TextInput
-                    onChange={(e) =>
-                        setSettings({
-                            general: {
-                                ...useSettingsStore.getState().general,
-                                pathReplaceWith: e.currentTarget.value,
-                            },
-                        })
-                    }
+                    onChange={(e) => {
+                        const value = e.currentTarget.value;
+                        setLocalPathReplaceWith(value);
+                        debouncedSetPathReplaceWith(value);
+                    }}
                     placeholder={t('setting.pathReplace_optionAddPrefix', {
                         postProcess: 'sentenceCase',
                     })}
-                    value={pathReplaceWith}
+                    value={localPathReplaceWith}
                 />
             </Group>
         </Stack>
     );
-};
+});