optimize custom hooks

.serena/memories/apps-app-jotai-migration-progress.md

@@ -117,7 +117,7 @@ export const use[Modal]Actions = (): [Modal]Actions => {
 ## ✅ 移行完了済み状態
 
 ### UI関連状態（完了）
-- ✅ **サイドバー状態**: `useDrawerOpened`, `usePreferCollapsedMode`, `useSidebarMode`, `useCurrentSidebarContents`, `useCollapsedContentsOpened`, `useCurrentProductNavWidth`
+- ✅ **サイドバー状態**: `useDrawerOpened`, `useSetPreferCollapsedMode`, `useSidebarMode`, `useCurrentSidebarContents`, `useCollapsedContentsOpened`, `useCurrentProductNavWidth`
 - ✅ **デバイス状態**: `useDeviceLargerThanXl`
 - ✅ **エディター状態**: `useEditorMode`, `useSelectedGrant`
 - ✅ **ページUI状態**: `usePageControlsX`

apps/app/src/client/components/Me/UISettings.tsx

@@ -5,7 +5,7 @@ import { UncontrolledTooltip } from 'reactstrap';
 
 import { updateUserUISettings } from '~/client/services/user-ui-settings';
 import { toastError, toastSuccess } from '~/client/util/toastr';
-import { usePreferCollapsedMode, useSidebarMode, useCollapsedContentsOpened } from '~/states/ui/sidebar';
+import { useSetPreferCollapsedMode, useSidebarMode, useCollapsedContentsOpened } from '~/states/ui/sidebar';
 
 import styles from './UISettings.module.scss';
 
@@ -28,7 +28,7 @@ export const UISettings = (): JSX.Element => {
   const {
     isDockMode, isCollapsedMode,
   } = useSidebarMode();
-  const [, setPreferCollapsedMode] = usePreferCollapsedMode();
+  const setPreferCollapsedMode = useSetPreferCollapsedMode();
   const [, setCollapsedContentsOpened] = useCollapsedContentsOpened();
 
   const toggleCollapsed = useCallback(() => {

apps/app/src/client/components/Sidebar/Sidebar.tsx

@@ -13,7 +13,7 @@ import { useDeviceLargerThanXl } from '~/states/ui/device';
 import { EditorMode, useEditorMode } from '~/states/ui/editor';
 import {
   useDrawerOpened,
-  usePreferCollapsedMode,
+  useSetPreferCollapsedMode,
   useSidebarMode,
   useCollapsedContentsOpened,
   useCurrentProductNavWidth,
@@ -74,7 +74,7 @@ const ResizableContainer = memo((props: ResizableContainerProps): JSX.Element =>
   const { isDrawerMode, isCollapsedMode, isDockMode } = useSidebarMode();
   const [, setIsDrawerOpened] = useDrawerOpened();
   const [currentProductNavWidth, setCurrentProductNavWidth] = useCurrentProductNavWidth();
-  const [, setPreferCollapsedMode] = usePreferCollapsedMode();
+  const setPreferCollapsedMode = useSetPreferCollapsedMode();
   const [, setCollapsedContentsOpened] = useCollapsedContentsOpened();
 
   const [isClient, setClient] = useState(false);

apps/app/src/client/components/Sidebar/SidebarHead/ToggleCollapseButton.tsx

@@ -3,7 +3,7 @@ import {
 } from 'react';
 
 import {
-  useDrawerOpened, usePreferCollapsedMode, useSidebarMode, useCollapsedContentsOpened,
+  useDrawerOpened, useSetPreferCollapsedMode, useSidebarMode, useCollapsedContentsOpened,
 } from '~/states/ui/sidebar';
 
 
@@ -14,7 +14,7 @@ export const ToggleCollapseButton = memo((): JSX.Element => {
 
   const { isDrawerMode, isCollapsedMode } = useSidebarMode();
   const [isDrawerOpened, setIsDrawerOpened] = useDrawerOpened();
-  const [, setPreferCollapsedMode] = usePreferCollapsedMode();
+  const setPreferCollapsedMode = useSetPreferCollapsedMode();
   const [, setCollapsedContentsOpened] = useCollapsedContentsOpened();
 
   const toggleDrawer = useCallback(() => {

apps/app/src/states/ui/sidebar/sidebar.ts

@@ -1,4 +1,5 @@
-import { atom, useAtom } from 'jotai';
+import { atom, useAtom, useSetAtom } from 'jotai';
+import { useCallback, useMemo } from 'react';
 
 import { scheduleToPut } from '~/client/services/user-ui-settings';
 import { SidebarContentsType, SidebarMode } from '~/interfaces/ui';
@@ -22,9 +23,8 @@ const preferCollapsedModeAtomExt = atom(
   },
 );
 
-export const usePreferCollapsedMode = () => {
-  return useAtom(preferCollapsedModeAtomExt);
-};
+export const useSetPreferCollapsedMode = () =>
+  useSetAtom(preferCollapsedModeAtomExt);
 
 // Collapsed contents opened state (temporary UI state, no persistence needed)
 const isCollapsedContentsOpenedAtom = atom(false);
@@ -95,14 +95,28 @@ export const useSidebarMode = (): {
 } & DetectSidebarModeUtils => {
   const [sidebarMode] = useAtom(sidebarModeAtom);
 
-  const isDrawerMode = () => sidebarMode === SidebarMode.DRAWER;
-  const isCollapsedMode = () => sidebarMode === SidebarMode.COLLAPSED;
-  const isDockMode = () => sidebarMode === SidebarMode.DOCK;
-
-  return {
-    sidebarMode,
-    isDrawerMode,
-    isCollapsedMode,
-    isDockMode,
-  };
+  const isDrawerMode = useCallback(
+    () => sidebarMode === SidebarMode.DRAWER,
+    [sidebarMode],
+  );
+
+  const isCollapsedMode = useCallback(
+    () => sidebarMode === SidebarMode.COLLAPSED,
+    [sidebarMode],
+  );
+
+  const isDockMode = useCallback(
+    () => sidebarMode === SidebarMode.DOCK,
+    [sidebarMode],
+  );
+
+  return useMemo(
+    () => ({
+      sidebarMode,
+      isDrawerMode,
+      isCollapsedMode,
+      isDockMode,
+    }),
+    [sidebarMode, isDrawerMode, isCollapsedMode, isDockMode],
+  );
 };