cssinjs/jss

themed useCreateStyles creates className mismatch when hydrating in StrictMode

Open

#1 338 ouverte le 26 avr. 2020

Voir sur GitHub
 (0 commentaires) (1 réaction) (0 assignés)JavaScript (7 000 stars) (434 forks)batch import
bughelp wanted

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

Guide contributeur

Stack technique
javascriptreact
Domaine
frontend
Type d'issue
bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 hours
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
stale
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
React hydration knowledgeCSS in JS basics
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
45
Direction de recherche
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.