Merge branch 'dev'

interface/src/components/layout/ListMenuItem.tsx

@@ -1,3 +1,5 @@
+import { memo } from 'react';
+import type { CSSProperties } from 'react';
 import { Link } from 'react-router';
 
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
@@ -20,8 +22,14 @@ interface ListMenuItemProps {
   disabled?: boolean;
 }
 
-function RenderIcon({ icon: Icon, bgcolor, label, text }: ListMenuItemProps) {
-  return (
+const iconStyles: CSSProperties = {
+  justifyContent: 'right',
+  color: 'lightblue',
+  verticalAlign: 'middle'
+};
+
+const RenderIcon = memo(
+  ({ icon: Icon, bgcolor, label, text }: ListMenuItemProps) => (
     <>
       <ListItemAvatar>
         <Avatar sx={{ bgcolor, color: 'white' }}>
@@ -30,8 +38,8 @@ function RenderIcon({ icon: Icon, bgcolor, label, text }: ListMenuItemProps) {
       </ListItemAvatar>
       <ListItemText primary={label} secondary={text} />
     </>
-  );
-}
+  )
+);
 
 const LayoutMenuItem = ({
   icon,
@@ -46,27 +54,31 @@ const LayoutMenuItem = ({
       <ListItem
         disablePadding
         secondaryAction={
-          <ListItemIcon
-            style={{
-              justifyContent: 'right',
-              color: 'lightblue',
-              verticalAlign: 'middle'
-            }}
-          >
+          <ListItemIcon style={iconStyles}>
             <NavigateNextIcon />
           </ListItemIcon>
         }
       >
         <ListItemButton component={Link} to={to}>
-          <RenderIcon icon={icon} bgcolor={bgcolor} label={label} text={text} />
+          <RenderIcon
+            icon={icon}
+            {...(bgcolor && { bgcolor })}
+            label={label}
+            text={text}
+          />
         </ListItemButton>
       </ListItem>
     ) : (
       <ListItem>
-        <RenderIcon icon={icon} bgcolor={bgcolor} label={label} text={text} />
+        <RenderIcon
+          icon={icon}
+          {...(bgcolor && { bgcolor })}
+          label={label}
+          text={text}
+        />
       </ListItem>
     )}
   </>
 );
 
-export default LayoutMenuItem;
+export default memo(LayoutMenuItem);