optimize settings store

src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx

@@ -1,6 +1,6 @@
 import isElectron from 'is-electron';
 import debounce from 'lodash/debounce';
-import { ChangeEvent, KeyboardEvent, useCallback, useMemo, useState } from 'react';
+import { ChangeEvent, KeyboardEvent, memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styles from './hotkeys-manager-settings.module.css';
@@ -120,9 +120,9 @@ const BINDINGS_MAP: Record<BindingActions, string> = {
     zoomOut: i18n.t('setting.hotkey', { context: 'zoomOut', postProcess: 'sentenceCase' }),
 };
 
-export const HotkeyManagerSettings = () => {
+export const HotkeyManagerSettings = memo(() => {
     const { t } = useTranslation();
-    const { bindings, globalMediaHotkeys } = useHotkeySettings();
+    const { bindings } = useHotkeySettings();
     const { setSettings } = useSettingsStoreActions();
     const [selected, setSelected] = useState<BindingActions | null>(null);
     const keyword = useSettingSearchContext();
@@ -162,7 +162,6 @@ export const HotkeyManagerSettings = () => {
             setSettings({
                 hotkeys: {
                     bindings: updatedBindings,
-                    globalMediaHotkeys,
                 },
             });
 
@@ -188,13 +187,12 @@ export const HotkeyManagerSettings = () => {
             setSettings({
                 hotkeys: {
                     bindings: updatedBindings,
-                    globalMediaHotkeys,
                 },
             });
 
             ipc?.send('set-global-shortcuts', updatedBindings);
         },
-        [bindings, globalMediaHotkeys, setSettings],
+        [bindings, setSettings],
     );
 
     const handleClearHotkey = useCallback(
@@ -207,13 +205,12 @@ export const HotkeyManagerSettings = () => {
             setSettings({
                 hotkeys: {
                     bindings: updatedBindings,
-                    globalMediaHotkeys,
                 },
             });
 
             ipc?.send('set-global-shortcuts', updatedBindings);
         },
-        [bindings, globalMediaHotkeys, setSettings],
+        [bindings, setSettings],
     );
 
     const duplicateHotkeyMap = useMemo(() => {
@@ -367,4 +364,4 @@ export const HotkeyManagerSettings = () => {
             options={options}
         />
     );
-};
+});

src/renderer/features/settings/components/hotkeys/hotkeys-tab.tsx

@@ -1,4 +1,5 @@
 import isElectron from 'is-electron';
+import { memo } from 'react';
 import { Fragment } from 'react/jsx-runtime';
 
 import { HotkeyManagerSettings } from '/@/renderer/features/settings/components/hotkeys/hotkey-manager-settings';
@@ -13,7 +14,7 @@ const sections = [
     { component: HotkeyManagerSettings, key: 'hotkey-manager' },
 ];
 
-export const HotkeysTab = () => {
+export const HotkeysTab = memo(() => {
     return (
         <Stack gap="md">
             {sections.map(({ component: Section, hidden, key }, index) => (
@@ -24,4 +25,4 @@ export const HotkeysTab = () => {
             ))}
         </Stack>
     );
-};
+});

src/renderer/features/settings/components/hotkeys/media-session-settings.tsx

@@ -1,4 +1,5 @@
 import isElectron from 'is-electron';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -6,11 +7,7 @@ import {
     SettingsSection,
 } from '/@/renderer/features/settings/components/settings-section';
 import { openRestartRequiredToast } from '/@/renderer/features/settings/restart-toast';
-import {
-    useHotkeySettings,
-    usePlaybackSettings,
-    useSettingsStoreActions,
-} from '/@/renderer/store/settings.store';
+import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
 import { Switch } from '/@/shared/components/switch/switch';
 import { PlayerType } from '/@/shared/types/types';
 
@@ -18,11 +15,9 @@ const isLinux = isElectron() ? window.api.utils.isLinux() : false;
 const isDesktop = isElectron();
 const localSettings = isElectron() ? window.api.localSettings : null;
 
-export const MediaSessionSettings = () => {
+export const MediaSessionSettings = memo(() => {
     const { t } = useTranslation();
     const { mediaSession, type: playbackType } = usePlaybackSettings();
-    const playbackSettings = usePlaybackSettings();
-    const hotkeySettings = useHotkeySettings();
     const { setSettings } = useSettingsStoreActions();
 
     function handleMediaSessionChange(e: boolean) {
@@ -31,7 +26,6 @@ export const MediaSessionSettings = () => {
             localSettings!.set('global_media_hotkeys', false);
             setSettings({
                 hotkeys: {
-                    ...hotkeySettings,
                     globalMediaHotkeys: false,
                 },
             });
@@ -40,7 +34,6 @@ export const MediaSessionSettings = () => {
         localSettings!.set('mediaSession', e);
         setSettings({
             playback: {
-                ...playbackSettings,
                 mediaSession: e,
             },
         });
@@ -70,4 +63,4 @@ export const MediaSessionSettings = () => {
     ];
 
     return <SettingsSection options={mediaSessionOptions} />;
-};
+});

src/renderer/features/settings/components/hotkeys/window-hotkey-settings.tsx

@@ -1,4 +1,5 @@
 import isElectron from 'is-electron';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -11,10 +12,9 @@ import { Switch } from '/@/shared/components/switch/switch';
 
 const localSettings = isElectron() ? window.api.localSettings : null;
 
-export const WindowHotkeySettings = () => {
+export const WindowHotkeySettings = memo(() => {
     const { t } = useTranslation();
     const settings = useHotkeySettings();
-    const playbackSettings = usePlaybackSettings();
     const { setSettings } = useSettingsStoreActions();
     const { mediaSession } = usePlaybackSettings();
 
@@ -28,7 +28,6 @@ export const WindowHotkeySettings = () => {
                         localSettings!.set('global_media_hotkeys', e.currentTarget.checked);
                         setSettings({
                             hotkeys: {
-                                ...settings,
                                 globalMediaHotkeys: e.currentTarget.checked,
                             },
                         });
@@ -45,7 +44,6 @@ export const WindowHotkeySettings = () => {
                             localSettings!.set('mediaSession', false);
                             setSettings({
                                 playback: {
-                                    ...playbackSettings,
                                     mediaSession: false,
                                 },
                             });
@@ -64,4 +62,4 @@ export const WindowHotkeySettings = () => {
     ];
 
     return <SettingsSection options={options} />;
-};
+});