themed useCreateStyles creates className mismatch when hydrating in StrictMode
- Dominant language
- JavaScript
- Stars
- 7.1k
- Forks
- 386
- PR merge metrics
- No merged PRs in 30d
Description
__Expected behavior:__
`className` matches during hydration
__Describe the bug:__
The counter in the className is off by one
__Codesandbox link:__
https://codesandbox.io/s/createusestyles-classname-mismatch-zdojq?file=/src/App.js
The useLayoutEffect warnings are false positives since we SSR in the browser to showcase the issue better.
__Versions (please complete the following information):__
- 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
Open the linked CodeSandbox and inspect /src/App.js, starting with the themed useCreateStyles usage and the hydration path in StrictMode. Reproduce the mismatch in Chrome with the reported versions, then verify that the className counter matches between server rendering and hydration.
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