I have an issue where I render lots of components, where each of these components have a useStyles
. We want the components props to affect the styling, so we combine props and theme settings. Works fine, except that it's incredible slow and I have narrowed it down to it being caused by having prop methods in makeStyles
.
It actually doesn't matter if the class is used or not. If all classes are static it's fast, but if I add an unused class that is a method it's slow. The prop doesn't matter either, like if I add test: { fontWeight: () => 'bold' }
it's going to be slow again.
Very weird indeed. I'm using Material UI ^4.11.0. Not the latest version of v4. Bug? Anyone heard of this? Anyone got a better solution for adding prop based styles and using the theme at the same time? Anyone got a performance improvement by using useMemo or anything? (It had not effect when I tried).
const useStyles = makeStyles(({ typography }) => ({
fontFamily: {
fontFamily: ({ fontFamily }: any) => fontFamily,
},
fontFamilySecondary: {
fontFamily: typography.fontFamilySecondary,
},
...filterCustomVariants(typography),
bold: {
fontWeight: typography.fontWeightBold,
},
boldScondary: {
fontWeight: typography.fontWeightBoldSecondary,
},
italic: {
fontStyle: "italic",
},
thisIsNotEvenUsed: {
fontWeight: () => {
console.log("Running running running") // Runs many times anyway!
return "bold"
},
},
}))
And the implementation:
const styleProps = { fontFamily: fontFamily }
const classes = useStyles(styleProps)
EDIT: Here are a CodeSandbox that shows this behavour, using latest MUI v4 and without my Apps complexity: