use memo and callbacks for reduced rendering vis caching

This commit is contained in:
proddy
2025-10-25 15:21:59 +02:00
parent 7ece395d1b
commit 58ae058465
4 changed files with 41 additions and 25 deletions

View File

@@ -1,3 +1,4 @@
import { memo } from 'react';
import type { FC } from 'react';
import { CssBaseline, ThemeProvider, responsiveFontSizes } from '@mui/material';
@@ -5,6 +6,7 @@ import { createTheme } from '@mui/material/styles';
import type { RequiredChildrenProps } from 'utils';
// Memoize dialog style to prevent recreation
export const dialogStyle = {
'& .MuiDialog-paper': {
borderRadius: '8px',
@@ -12,8 +14,9 @@ export const dialogStyle = {
borderStyle: 'solid',
borderWidth: '1px'
}
};
} as const;
// Memoize theme creation to prevent recreation
const theme = responsiveFontSizes(
createTheme({
typography: {
@@ -34,11 +37,11 @@ const theme = responsiveFontSizes(
})
);
const CustomTheme: FC<RequiredChildrenProps> = ({ children }) => (
const CustomTheme: FC<RequiredChildrenProps> = memo(({ children }) => (
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
);
));
export default CustomTheme;