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.

Sign up for GitHub

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

Jump to bottom

When SSR, useLayoutEffect warning in UnderlineNav v2 #2617

Closed
b6pzeusbc54tvhw5jgpyw8pwz2x6gs opened this issue Nov 26, 2022 · 1 comment · Fixed by #2625
Closed

When SSR, useLayoutEffect warning in UnderlineNav v2 #2617

b6pzeusbc54tvhw5jgpyw8pwz2x6gs opened this issue Nov 26, 2022 · 1 comment · Fixed by #2625
Assignees
@broccolinisoup
Labels
bug Something isn't working react

Comments

@b6pzeusbc54tvhw5jgpyw8pwz2x6gs
Copy link

b6pzeusbc54tvhw5jgpyw8pwz2x6gs commented Nov 26, 2022 •
edited
Loading

Description

When entering a page with SSR in the nextjs project, the useLayoutEffect warning.

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.
    at /Users/b6pzeusbc54tvhw5jgpyw8pwz2x6gs/projects/nextjs12-sample/node_modules/@primer/react/lib/UnderlineNav2/UnderlineNavItem.js:25:7

Steps to reproduce

  1. Run the nextjs development server.
  2. Refresh the browser to enter the page via SSR.
  3. Check the development server log (not the browser console log).

Version

35.14.2

Browser

No response
@b6pzeusbc54tvhw5jgpyw8pwz2x6gs b6pzeusbc54tvhw5jgpyw8pwz2x6gs added the bug Something isn't working label Nov 26, 2022
@b6pzeusbc54tvhw5jgpyw8pwz2x6gs b6pzeusbc54tvhw5jgpyw8pwz2x6gs changed the title useLayoutEffect warning in UnderlineNavV2 useLayoutEffect warning in UnderlineNav v2 Nov 26, 2022
@b6pzeusbc54tvhw5jgpyw8pwz2x6gs b6pzeusbc54tvhw5jgpyw8pwz2x6gs changed the title useLayoutEffect warning in UnderlineNav v2 SSR useLayoutEffect warning in UnderlineNav v2 Nov 26, 2022
@b6pzeusbc54tvhw5jgpyw8pwz2x6gs b6pzeusbc54tvhw5jgpyw8pwz2x6gs changed the title SSR useLayoutEffect warning in UnderlineNav v2 When SSR, useLayoutEffect warning in UnderlineNav v2 Nov 26, 2022
@broccolinisoup broccolinisoup self-assigned this Nov 28, 2022
@broccolinisoup broccolinisoup mentioned this issue Dec 1, 2022
Merged
@broccolinisoup
Copy link
Member

👋🏼 @b6pzeusbc54tvhw5jgpyw8pwz2x6gs Thanks for reporting this issue! This should fix the warning and please see the PR description about the behaviour as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@broccolinisoup broccolinisoup

Labels
bug Something isn't working react
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

UnderlineNav2: Use useIsomorphicLayoutEffect to make it SSR friendly primer/react
3 participants
@broccolinisoup @b6pzeusbc54tvhw5jgpyw8pwz2x6gs @primer-css