Home > database >  MUI - Slow makeStyles if using props in methods
MUI - Slow makeStyles if using props in methods

Time:10-26

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: Codesandbox Demo

  • Related