Skip to content

Error in SSR due to useLayoutEffect in CheckBox #2111

Closed
@Swiftwork

Description

@Swiftwork

Describe the bug
Warning observed with useLayoutEffect and SSR in the CheckBox component.
https://github.com/primer/react/blob/main/src/Checkbox.tsx#L62

To Reproduce
Steps to reproduce the behavior:

  1. Setup a next.js project
  2. Add primer
  3. Add checkbox to page
  4. See warning

Expected behavior
Replace useLayoutEffect with useIsomorphicLayoutEffect similar to this PR #1583.

Screenshots

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

Desktop (please complete the following information):

  • OS: all
  • Browser: all
  • Version: 35.2.2

Smartphone (please complete the following information):

  • Device: all
  • OS: all
  • Browser: all
  • Version: 35.2.2

Metadata

Metadata

Assignees

Labels

bugSomething isn't workingreact

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions