optimizations

interface/src/components/SectionContent.tsx

@@ -1,6 +1,8 @@
+import { memo } from 'react';
 import type { FC } from 'react';
 
 import { Paper } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material/styles';
 
 import type { RequiredChildrenProps } from 'utils';
 
@@ -8,16 +10,19 @@ interface SectionContentProps extends RequiredChildrenProps {
   id?: string;
 }
 
-const SectionContent: FC<SectionContentProps> = (props) => {
-  const { children, id } = props;
-  return (
-    <Paper
-      id={id}
-      sx={{ p: 1.5, m: 1.5, borderRadius: 3, border: '1px solid rgb(65, 65, 65)' }}
-    >
-      {children}
-    </Paper>
-  );
+// Extract styles to avoid recreation on every render
+const paperStyles: SxProps<Theme> = {
+  p: 1.5,
+  m: 1.5,
+  borderRadius: 3,
+  border: '1px solid rgb(65, 65, 65)'
 };
 
-export default SectionContent;
+const SectionContent: FC<SectionContentProps> = ({ children, id }) => (
+  <Paper id={id} sx={paperStyles}>
+    {children}
+  </Paper>
+);
+
+// Memoize to prevent unnecessary re-renders
+export default memo(SectionContent);