Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error in SSR due to useLayoutEffect in CheckBox #2111

Closed
Swiftwork opened this issue Jun 3, 2022 · 3 comments
Closed

Error in SSR due to useLayoutEffect in CheckBox #2111

Swiftwork opened this issue Jun 3, 2022 · 3 comments
Assignees
Labels
bug Something isn't working react

Comments

@Swiftwork
Copy link
Contributor

Swiftwork commented Jun 3, 2022

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
@siddharthkp siddharthkp added bug Something isn't working react labels Jun 3, 2022
@siddharthkp
Copy link
Member

siddharthkp commented Jun 3, 2022

Good catch!

Happy to accept a PR if you have the time

@Swiftwork
Copy link
Contributor Author

I'll look at creating one Monday :)

@siddharthkp
Copy link
Member

Fixed in #2155 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working react
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants