Possible Memory Leak with Styles

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

Although there was an issue before about this kind of leak: https://github.com/mui-org/material-ui/issues/8019

That was apparently resolved, so thought I’d open up a new issue if its perhaps something new this time.

Context

I’m using material-ui in my server-rendered React app.

Behavior

I’ve been searching for a memory leak in my Node.js server lately. It was getting pretty severe, my servers are leaking 100s of MB every day. Through this process I’ve been doing memory dumps using Chrome dev tools and looking at the object allocations between Snapshots to see what is retained (after many requests and abuse to the server).

What I’ve found is plenty of retained data of (array) type which seems to be pointing to sheetsManager which is also pointing to material-ui and the withStyles.js file:

If I open up one of those sheet things, I get this:

Which clearly points to jss and you can see some key which says paperAnchorTop which sounds very much like material-ui.

There are 213 of these entries in the array which have been retained. Which sounds like the same amount of page requests which I made to my server.

The entry to my app on both server and client looks like this:

export function baseReact(stores, router, userAgent) {
  const muiThemeComponents = {};

  // For SSR, user agent passed from request
  if (userAgent) {
    muiThemeComponents.userAgent = userAgent;
  }

  const muiTheme = createMuiTheme();

  return (
    <ErrorBoundary>
      <Provider {...stores}>
        <MuiThemeProvider theme={muiTheme}>{router}</MuiThemeProvider>
      </Provider>
    </ErrorBoundary>
  );
}

Which on the server is rendered like so:

const html = reactDomServer.renderToString(
  baseReact(ctx.state.mobx, <RouterContext {...props} />, userAgent)
);

I think that’s pretty stock standard and shouldn’t be causing any leaks just like that.

Since the large majority of retained information seems to be coming from this sheet :: StyleSheet object, I think that something is leaking either with jss or the way material-ui deals with styles itself.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.40
React	16.3.1
browser	Chrome
Node.js	9.8.0

[oliviertassinari]

@lostpebble I just had a look at your reproduction repository. There is definitely a leak. It’s easy to fix. I’m looking at how to prevent people from falling into this trap in the first place.

[dmdb]

I’ve found memory leak in my application, and it was my bad code. Nextjs example got no problems (tested while tried to reproduce 😃 ) Anyway, sorry and thanks for attention!