cssinjs / cssinjs/jss

themed useCreateStyles leaks style tags in StrictMode

Open
#1,332 1 comment 1 reaction 0 assignees View on GitHub
bug help wanted
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.