cssinjs / cssinjs/jss

themed useCreateStyles creates className mismatch when hydrating in StrictMode

Open
#1,338 0 comments 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:__
`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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.