[styles] Style nodes leaking when switching global theme in StrictMode

• 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 😯

I have been created a sandbox for this bug here https://codesandbox.io/s/clever-black-shc9b?file=/src/index.tsx.

For nested <ThemeProvider/>s rendered in <React.StrictMode/>. The style nodes created by the inner theme will be leaking when switching the outer theme alternately.

Steps to Reproduce 🕹

Steps:

1. Go to https://codesandbox.io/s/clever-black-shc9b?file=/src/index.tsx
2. Open Chrome dev tools and inspect the <head/> node of the browser panel
3. You will see for every 2 seconds a new style node was added continuously
4. If you remove the <React.StrictMode/> node then this buggy behavior will be gone

[oliviertassinari]

An update, we have now made enough progress with the new @material-ui/styled-engine package in v5 to move toward a progressive removal of the @material-ui/styles package (based on JSS). The current plan:

• In v5.0.beta.0, this package will come standalone, in complete isolation from the rest.
• In v5.0.0, this package will be soft deprecated, not promoted in the docs, nor very actively supported.
• During v5, work on making the migration easier to the new style API (sx prop + styled() API). We might for instance, invest in the documentation for using react-jss that has more or less the same API. We could also invest in an adapter to restore the previous API but with emotion, not JSS.
• In v6.0.0, this package will be discontinued (withStyles/makeStyles API).

This was made possible by the awesome work of @mnajdova.

[olee]

Ok I found out that useSynchronousEffect is used because it’s handler takes care of creating and attaching the stylesheets, which is necessary for the following code to get the classes. However I think there is a better solution to solve the issue of getting class names for rendering of the component.

To solve this, I would propose splitting this into two steps:

1. Synchronous actions:
   • Create a (temporary) stylesheet
   • Add stylesheet to sheetsRegistry (required for SSR, ain’t it?)
2. A following useLayoutEffect which should take care of committing the changes:
   • increasing the ref counter
   • attaching the stylesheet to the dom

I did some testing by directly modifying the code in makeStyles.js and could prove that doing it this way fixes the issue with StrictMode.

PS: Why was the important label removed? I think this is actually quite the important move in order to allow developers to work towards future-proof applications by using StrictMode