themed useCreateStyles leaks style tags in StrictMode
- Dominant language
- JavaScript
- Stars
- 7.1k
- Forks
- 386
- PR merge metrics
- No merged PRs in 30d
Description
__Expected behavior:__
`` 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
Contributor guide
Research direction
Start with the linked CodeSandbox and reproduce the leak by clicking "rerender" while watching the number of elements. Trace useStyles and its theme-related sheet management across render and effect cleanup; done means repeated StrictMode rerenders no longer increase the style-element count.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100