fix: useMemo in menus

traccar · Jul 2, 2024 · 22c0b58 · 22c0b58
1 parent e15f109
commit 22c0b58
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/common/components/PageLayout.jsx b/src/common/components/PageLayout.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   AppBar,
   Breadcrumbs,
@@ -74,6 +74,8 @@ const PageLayout = ({ menu, breadcrumbs, children }) => {
 
   const [openDrawer, setOpenDrawer] = useState(false);
 
+  const menuMemo = useMemo(() => menu, []);
+
   return desktop ? (
     <div className={classes.desktopRoot}>
       <Drawer
@@ -88,7 +90,7 @@ const PageLayout = ({ menu, breadcrumbs, children }) => {
           <PageTitle breadcrumbs={breadcrumbs} />
         </Toolbar>
         <Divider />
-        {menu}
+        {menuMemo}
       </Drawer>
       <div className={classes.content}>{children}</div>
     </div>

diff --git a/src/settings/components/EditItemView.jsx b/src/settings/components/EditItemView.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import {
   Container, Button, Accordion, AccordionDetails, AccordionSummary, Skeleton, Typography, TextField,
@@ -54,8 +54,10 @@ const EditItemView = ({
     }
   });
 
+  const menuMemo = useMemo(() => menu, []);
+
   return (
-    <PageLayout menu={menu} breadcrumbs={breadcrumbs}>
+    <PageLayout menu={menuMemo} breadcrumbs={breadcrumbs}>
       <Container maxWidth="xs" className={classes.container}>
         {item ? children : (
           <Accordion defaultExpanded>