Update SidebarSettings.tsx

web/src/components/features/sidebars/SidebarPrimary.tsx

@@ -150,13 +150,16 @@ export const SidebarPrimary = React.memo(() => {
 
   const onCloseSupportModal = useMemoizedFn(() => setOpenSupportModal(false));
 
+  const HeaderMemoized = useMemo(() => <SidebarPrimaryHeader />, []);
+  const FooterMemoized = useMemo(() => <SidebarUserFooter />, []);
+
   return (
     <>
       <Sidebar
         content={sidebarItems}
-        header={<SidebarPrimaryHeader />}
+        header={HeaderMemoized}
         activeItem={currentRoute}
-        footer={<SidebarUserFooter />}
+        footer={FooterMemoized}
       />
 
       <GlobalModals openSupportModal={openSupportModal} onCloseSupportModal={onCloseSupportModal} />
@@ -166,8 +169,7 @@ export const SidebarPrimary = React.memo(() => {
 
 SidebarPrimary.displayName = 'SidebarPrimary';
 
-const SidebarPrimaryHeader = React.memo(
-  () => {
+const SidebarPrimaryHeader: React.FC = () => {
   const onChangePage = useAppLayoutContextSelector((s) => s.onChangePage);
   useHotkeys('C', () => {
     onChangePage(BusterRoutes.APP_HOME);
@@ -198,20 +200,15 @@ const SidebarPrimaryHeader = React.memo(
       </div>
     </div>
   );
-  },
-  () => true
-);
+};
 
-SidebarPrimaryHeader.displayName = 'SidebarPrimaryHeader';
-
-const GlobalModals = React.memo(
-  ({
+const GlobalModals = ({
   openSupportModal,
   onCloseSupportModal
-  }: {
+}: {
   openSupportModal: boolean;
   onCloseSupportModal: () => void;
-  }) => {
+}) => {
   const onToggleInviteModal = useAppLayoutContextSelector((s) => s.onToggleInviteModal);
   const openInviteModal = useAppLayoutContextSelector((s) => s.openInviteModal);
   const onCloseInviteModal = useMemoizedFn(() => onToggleInviteModal(false));
@@ -225,8 +222,7 @@ const GlobalModals = React.memo(
       <SupportModal open={openSupportModal} onClose={onCloseSupportModal} />
     </>
   );
-  }
-);
+};
 GlobalModals.displayName = 'GlobalModals';
 
 const favoritesDropdown = (

web/src/components/features/sidebars/SidebarSettings.tsx

@@ -74,12 +74,24 @@ export const SidebarSettings: React.FC<{}> = React.memo(({}) => {
     return items;
   }, [isAdmin]);
 
+  console.log(currentParentRoute);
+
   return (
     <Sidebar
       content={content}
-      header={<SidebarSettingsHeader />}
+      header={useMemo(
+        () => (
+          <SidebarSettingsHeader />
+        ),
+        []
+      )}
       activeItem={currentParentRoute}
-      footer={<SidebarUserFooter />}
+      footer={useMemo(
+        () => (
+          <SidebarUserFooter />
+        ),
+        []
+      )}
     />
   );
 });