limit antd menu performance issue using useMemo

jdeniau · Oct 8, 2024 · 03dd67b · 03dd67b
1 parent cc80b73
commit 03dd67b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 18 deletions.
diff --git a/src/renderer/component/TableList.tsx b/src/renderer/component/TableList.tsx
@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ReactElement, useMemo } from 'react';
 import { Menu, MenuProps } from 'antd';
 import { Link, useParams } from 'react-router-dom';
 import { useConnectionContext } from '../../contexts/ConnectionContext';
@@ -18,24 +18,26 @@ export default function TableList({
   const { database } = useDatabaseContext();
   const { tableName } = useParams();
 
+  const items: MenuItem[] = useMemo(
+    () =>
+      tableStatusList?.map((rowDataPacket: ShowTableStatus) => ({
+        key: rowDataPacket.Name,
+        label: (
+          <Link
+            to={`/connections/${currentConnectionSlug}/${database}/tables/${rowDataPacket.Name}`}
+          >
+            {rowDataPacket.Name}
+          </Link>
+        ),
+        title: rowDataPacket.Name,
+      })),
+    [currentConnectionSlug, database, tableStatusList]
+  );
+
   if (!tableStatusList) {
     return null;
   }
 
-  const items: MenuItem[] = tableStatusList.map(
-    (rowDataPacket: ShowTableStatus) => ({
-      key: rowDataPacket.Name,
-      label: (
-        <Link
-          to={`/connections/${currentConnectionSlug}/${database}/tables/${rowDataPacket.Name}`}
-        >
-          {rowDataPacket.Name}
-        </Link>
-      ),
-      title: rowDataPacket.Name,
-    })
-  );
-
   return (
     <Menu items={items} selectedKeys={tableName ? [tableName] : undefined} />
   );

diff --git a/src/renderer/routes/connections.$connectionSlug.tsx b/src/renderer/routes/connections.$connectionSlug.tsx
@@ -27,6 +27,11 @@ import NavigateModalContextProvider, {
 const Sider = styled(Layout.Sider)`
   border-right: 1px solid ${foreground};
   background: ${background} !important;
+  overflow: auto;
+`;
+
+const Content = styled(Layout.Content)`
+  overflow: auto;
 `;
 
 interface RouteParams extends LoaderFunctionArgs {
@@ -114,16 +119,16 @@ export default function ConnectionDetailPage() {
           <AllColumnsContextProvider allColumns={allColumns}>
             <NavigateModalContextProvider>
               <Layout>
-                <Sider width={200} style={{ overflow: 'auto' }}>
+                <Sider width={200}>
                   <Flex vertical gap="small">
                     <DatabaseSelector databaseList={databaseList} />
                     <OpenNavigateModalButton />
                     <TableList tableStatusList={tableStatusList} />
                   </Flex>
                 </Sider>
-                <Layout.Content style={{ overflow: 'auto' }}>
+                <Content>
                   <Outlet />
-                </Layout.Content>
+                </Content>
               </Layout>
             </NavigateModalContextProvider>
           </AllColumnsContextProvider>