don't re-render sidebar whenever any manager UI state changes

storybookjs · Mar 5, 2024 · 9d90dc1 · 9d90dc1
1 parent 94099bb
commit 9d90dc1
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx
@@ -17,7 +17,7 @@ import { Explorer } from './Explorer';
 import { Search } from './Search';
 
 import { SearchResults } from './SearchResults';
-import type { Refs, CombinedDataset, Selection } from './types';
+import type { CombinedDataset, Selection } from './types';
 import { useLastViewed } from './useLastViewed';
 import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
 
@@ -79,20 +79,26 @@ const Swap = React.memo(function Swap({
 });
 
 const useCombination = (
-  defaultRefData: API_LoadedRefData & { status: State['status'] },
-  refs: Refs
+  index: SidebarProps['index'],
+  indexError: SidebarProps['indexError'],
+  previewInitialized: SidebarProps['previewInitialized'],
+  status: SidebarProps['status'],
+  refs: SidebarProps['refs']
 ): CombinedDataset => {
   const hash = useMemo(
     () => ({
       [DEFAULT_REF_ID]: {
-        ...defaultRefData,
+        index,
+        indexError,
+        previewInitialized,
+        status,
         title: null,
         id: DEFAULT_REF_ID,
         url: 'iframe.html',
       },
       ...refs,
     }),
-    [refs, defaultRefData]
+    [refs, index, indexError, previewInitialized, status]
   );
   return useMemo(() => ({ hash, entries: Object.entries(hash) }), [hash]);
 };
@@ -126,7 +132,7 @@ export const Sidebar = React.memo(function Sidebar({
   onMenuClick,
 }: SidebarProps) {
   const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]);
-  const dataset = useCombination({ index, indexError, previewInitialized, status }, refs);
+  const dataset = useCombination(index, indexError, previewInitialized, status, refs);
   const isLoading = !index && !indexError;
   const lastViewedProps = useLastViewed(selected);