[withStyles] Class names are regenerated every time the theme changes.

If I have a HOC: withStyles({ root: { fontWeight: 'bold' } }) it will get turned into a class name, such as .MyComponent-root-1. If I now change my theme on the MuiThemeProvider component, this HOC re-generates this class name as .MyComponent-root-2. In the majority of cases, this effect is unnoticed, but I am an edge case where I am changing the theme semi-rapidly. As a result, the memory used by my page maxes out as the class names count rapidly towards infinity.

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Class names should not change if the class definition did not change.

Current Behavior

Class names change, no matter what, even if the object reference does not change.

Steps to Reproduce

Make any withStyles HOC and change the theme.

Context

I’d like to change my theme without the entire DOM being altered. This is a major performance problem.

At the very least, I believe unchanging object references should prevent re-rendering:

let cache = {};
let color = 'red';
const myStyles = (theme) => {

  // Only change object reference if object changes.
  if (theme.palette.primary.main!== color ) {
    color = theme.palette.primary.main;
    cache = {
      myClassName: { color }
    };
  }
  return cache;
};

This will not impact the majority of users who use:

const myStyles = (theme) => ({
  myClassName: {
    color: theme.palette.primary.main
  }
});

But it should give a performance boost to anyone who is conscious about such things (or needs to be, like myself).

I wouldn’t mind PR’ing this myself, but I do not know where to look for where these class names are generated. It doesn’t seem like much of a change. A shallow comparison should work fine. if (currentJSS === previousJSS) { return lastClassName; } else { return createNewClassName(); }.

[CharlesStover]

@thucngdg This issue is solved. You need to move <MuiThemeProvider> outside of the Form component. Make it a parent. <MuiThemeProvider theme={createMuiTheme(muiTheme)}><Form /></MuiThemeProvider> for example.

Best practice is to wrap your entire <App /> in <MuiThemeProvider>. You do not have to use <MuiThemeProvider> in each Component that uses a MUI Theme. You only use it once – like the Redux <Provider> Component that you have wrapping your entire <App />. Put the <MuiThemeProvider> in the same place. 😃

[thucngdg]

Thanks 😃