cssinjs/jss

themed useCreateStyles creates className mismatch when hydrating in StrictMode

Open

#1,338 opened on Apr 26, 2020

View on GitHub
 (0 comments) (1 reaction) (0 assignees)JavaScript (434 forks)batch import
bughelp wanted

Repository metrics

Stars
 (7,000 stars)
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
Investigate the class name counter offset during SSR vs CSR with React StrictMode. Examine the JSS useCreateStyles hook and how it handles hydration in StrictMode, particularly the counter logic for class name generation.
Tech stack
javascriptreact
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactCSS in JSJSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65