[styles] My app have memory leak on browser after using material-ui.

[qhxin]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

My APP has memory leak on Firefox, after using material-ui.

Expected Behavior 🤔

My APP must render very frequently by our realtime data.

Steps to Reproduce 🕹

Steps:

1. use makeStyles to create useStyles hook;
2. use useStyles hook in components.
3. re calculate components frequently.
4. memory is rising.

Context 🔦

https://codesandbox.io/s/inspiring-waterfall-e197h?file=/src/App.js
codesandbox.io/s/dazzling-visvesvaraya-eczqe?file=/src/Tab.js

Your Environment 🌎

Edit @eps1lon: Added codesandbox.io/s/dazzling-visvesvaraya-eczqe?file=/src/Tab.js as repro.

[qhxin]

performance on chrome:

memory info on firefox:

[joshwooding]

I can't recreate this using the codesandbox on Firefox 78.0b9 (64-bit) or Chrome 83.0.4103.116 (Official Build) (64-bit)
Windows 10 1903.

What environment did you encounter this in and can you definitely reproduce with the codesandbox?

[eps1lon]

For memory leak related issues please make sure to include whether

1. this is affected by StrictMode or concurrent mode i.e. can this be reproduced regardless of the mode react is in
2. this is reproducible with a production build. While a leak in development is problematic and indicative of an underlying issue it is far less severe than a leak in prod environments where older machines are more prevalent.

[qhxin]

For memory leak related issues please make sure to include whether

1. this is affected by StrictMode or concurrent mode i.e. can this be reproduced regardless of the mode react is in
2. this is reproducible with a production build. While a leak in development is problematic and indicative of an underlying issue it is far less severe than a leak in prod environments where older machines are more prevalent.

@eps1lon tks for reply me, i hav'nt use StrictMode, and leak is caused in dev & prod Firefox/Safari env.

[joshwooding]

@qhxin Can you post your version of Firefox and confirm you could reproduce this using the codesandbox?

[eps1lon]

@qhxin Can you post your version of Firefox and confirm you could reproduce this using the codesandbox?

I've forked it and deployed it: https://csb-qvhqs.netlify.app/. Please make sure that we know if this reproduces in prod or dev.

[joshwooding]

Tried using @eps1lon's deployment to reproduce it and still can't after 4 hours. It's amazing to have a visual representation of how much production mode increases performance.

[qhxin]

@joshwooding @eps1lon after long time debug, i found it's caused by my Tab style. The demo is: https://codesandbox.io/s/dazzling-visvesvaraya-eczqe?file=/src/Tab.js

This code is the reason that makes Firefox rule tree leak.

          "&:not(:first-child)": {
            borderLeft: "none"
          }

[qhxin]

There are so many inline style sheets .