Refactor ScrollHeader and utility functions for improved performance and readability

src/components/Scroll/ScrollHeader.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect, useMemo, useRef } from 'react';
+import React, { CSSProperties, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useScrollContext } from './Scroll.provider';
 import { Item } from './types';
 
@@ -50,6 +50,22 @@ export const ScrollHeader: React.FC<IScrollHeaderProps> = ({ path, itemId, itemR
     }
   }, [headerBehavior, path, stickTo]);
 
+  const memoizedHeaderCollapseOpen = useCallback(() => headerCollaspeOpen(path), [headerCollaspeOpen, path]);
+  const memoizedHeaderCollapseClose = useCallback(() => headerCollaspeClose(path), [headerCollaspeClose, path]);
+  const isCollapsed = useMemo(() => collapsedPaths.includes(path.join('-')), [collapsedPaths]);
+
+  const momoizedHeader = useMemo(
+    () =>
+      itemRender({
+        collapse: {
+          open: memoizedHeaderCollapseOpen,
+          close: memoizedHeaderCollapseClose,
+          isOpen: !isCollapsed,
+        },
+      }),
+    [itemRender, isCollapsed, memoizedHeaderCollapseOpen, memoizedHeaderCollapseClose],
+  );
+
   return (
     <li
       id={itemId}
@@ -58,16 +74,10 @@ export const ScrollHeader: React.FC<IScrollHeaderProps> = ({ path, itemId, itemR
       style={{ ...behaviorStyle }}
       aria-label="Scroll Header"
       role="heading"
-      aria-level={1}
+      aria-level={path.length}
       ref={ref}
     >
-      {itemRender({
-        collapse: {
-          open: () => headerCollaspeOpen(path),
-          close: () => headerCollaspeClose(path),
-          isOpen: !collapsedPaths.includes(path.join('-')),
-        },
-      })}
+      {momoizedHeader}
     </li>
   );
 };

src/components/Scroll/story/util.tsx

@@ -1,5 +1,6 @@
 import { faker } from '@faker-js/faker';
 import { Item } from '../types';
+import { useMemo } from 'react';
 
 const argTypes = {
   items: {
@@ -32,14 +33,15 @@ const headerRender =
   ({ collapse }) => {
     const { isOpen, close, open } = collapse ?? {};
 
-    let header;
-    if (key === 1) {
-      header = faker.person.jobTitle();
-    } else if (key === 2) {
-      header = faker.location.country();
-    } else {
-      header = faker.company.name();
-    }
+    const header = useMemo(() => {
+      if (key === 1) {
+        return faker.person.jobTitle();
+      } else if (key === 2) {
+        return faker.location.country();
+      } else {
+        return faker.company.name();
+      }
+    }, []);
 
     return (
       <div
@@ -74,10 +76,15 @@ const headerRender =
   };
 
 const itemRender: Item['render'] = () => {
-  const randomName = faker.person.fullName();
-  const color = `#${Math.floor(Math.random() * 16777215)
-    .toString(16)
-    .padStart(6, '0')}`;
+  const name = useMemo(() => faker.person.fullName(), []);
+  const color = useMemo(
+    () =>
+      `#${Math.floor(Math.random() * 16777215)
+        .toString(16)
+        .padStart(6, '0')}`,
+    [],
+  );
+
   return (
     <div
       style={{
@@ -99,7 +106,7 @@ const itemRender: Item['render'] = () => {
           marginRight: '10px',
         }}
       ></div>
-      {randomName}
+      {name}
     </div>
   );
 };

src/components/Scroll/util/get-items.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { ScrollHeader } from '../ScrollHeader';
 import { ScrollItem } from '../ScrollItem';
 import { Items, HeaderBehavior } from '../types';
 
+const hiddenStyles: CSSProperties = { visibility: 'hidden', position: 'absolute', width: '0', height: '0' };
+
 type GetItemsProps = {
   items: Items;
   headerBehavior: HeaderBehavior;
@@ -19,12 +21,14 @@ export const getItems = ({ headerBehavior, items, path = [], collapsedPaths }: G
         const currentPath = [...path, index];
 
         if (item.nestedItems?.length) {
+          const hiddenStyle = collapsedPaths.includes(currentPath.join('-')) ? hiddenStyles : {};
+
           return (
             <Wrapper key={currentPath.join('-')}>
               <ScrollHeader path={currentPath} itemRender={item.render} itemId={item.id} />
-              {collapsedPaths.includes(currentPath.join('-'))
-                ? null
-                : getItems({ items: item.nestedItems, headerBehavior, path: currentPath, collapsedPaths })}
+              <section style={hiddenStyle}>
+                {getItems({ items: item.nestedItems, headerBehavior, path: currentPath, collapsedPaths })}
+              </section>
             </Wrapper>
           );
         } else {

src/welcome.stories.tsx

@@ -23,6 +23,7 @@ export default {
     options: { showPanel: false },
     controls: { hideNoControlsWarning: true, disable: true },
     actions: { disable: true },
+    toolbar: { hidden: true },
   },
 } as Meta;