cssinjs/jss

themed useCreateStyles creates className mismatch when hydrating in StrictMode

Open

#1.338 geöffnet am 26. Apr. 2020

Auf GitHub ansehen
 (0 Kommentare) (1 Reaktion) (0 zugewiesene Personen)JavaScript (7.000 Stars) (434 Forks)batch import
bughelp wanted

Beschreibung

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

Tech Stack
javascriptreact
Domain
frontend
Issue Type
bug
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 hours
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
stale
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
React hydration knowledgeCSS in JS basics
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
45
Research-Richtung
Investigate the className counter logic in JSS's createUseStyles hook, likely in packages/jss/src/createUseStyles.js. The codesandbox demonstrates a mismatch during hydration, so focus on how class names are generated and incremented across server and client renders. Check if the counter resets incorrectly in React StrictMode double rendering.