themed useCreateStyles leaks style tags in StrictMode

[eps1lon]

Expected behavior:
<style> elements get disposed when re-rendering in StrictMode.

Describe the bug:
When using themed styles (possibly prop-based as well) re-rendering a component using useStyles with a new theme will leak their <style> elements.

This is possibly due to useStyles managing the sheet during render but unmanaging it in a effect cleanup. A component can render multiple times (in concurrent and strict mode) before an effect is scheduled.

Codesandbox link:
https://codesandbox.io/s/determined-wood-8d0s7?file=/src/App.js:513-622

Click "rerender" and see that the number of <style> element grows with every "rerender" click.

Versions (please complete the following information):

• react-jss: 10.1.1
• Browser [e.g. chrome, safari]: Chrome 81
• OS [e.g. Windows, macOS]: Ubuntu 18.04
• react: 16.13.1

[half-halt]

I have the same problem, in my case, I have two themes, you can toggle once, then you can't toggle again and whichever on is the second theme lives forever.

I have changed createUseStyles to avoid both the problem mentioned above @eps1lon and also the problem I was having (which is kind of related by not really. Since affects the timing, I need to update a couple of tests, but if anyone wants try the change, I can provide it while I work on the tests.