Skip to content

React strict mode forces dynamic rules to be added twice which breaks hydration #1643

@yung-danny

Description

@yung-danny

Expected behavior:
Consistent jssId and ruleCounter with strict mode

Describe the bug:
Using React Strict Mode wrapper forces dynamic rules to be generated twice on client. On next js server they are generated only one time. This all leads to classes mismatch by counter at some point

Reproduction:

https://codesandbox.io/p/sandbox/upbeat-grothendieck-9ne4d2
Look how input, text and container classes in dom are 1 step behind from generated on client stylesheets with strict mode enabled

Versions (please complete the following information):

  • jss: 10.10.0
  • Browser [e.g. chrome, safari]: Chrome
  • OS [e.g. Windows, macOS]: macOs
  • React: 18.2.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions