From 22c0b58556d552fe2396b284146eb650e8d748ee Mon Sep 17 00:00:00 2001
From: Jorge Reyes <92123185+JorgeArt81@users.noreply.github.com>
Date: Mon, 1 Jul 2024 21:16:02 -0500
Subject: [PATCH] fix: useMemo in menus

---
 src/common/components/PageLayout.jsx     | 6 ++++--
 src/settings/components/EditItemView.jsx | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/common/components/PageLayout.jsx b/src/common/components/PageLayout.jsx
index e81c975402..f43e065a75 100644
--- 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
index 61bc41616e..9aae17859b 100644
--- 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>