8000 Suppress `useLayoutEffect` rehydration warning in `useDebugDashboard` by chrissantamaria · Pull Request #552 · yahoo/react-i13n · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Suppress useLayoutEffect rehydration warning in useDebugDashboard #552

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
Merged
merged 1 commit into from
Mar 29, 2022
Merged

Suppress useLayoutEffect rehydration warning in useDebugDashboard #552

merged 1 commit into from
Mar 29, 2022

Conversation

chrissantamaria
Copy link
Contributor

👋 trying to use react-i13n in an SSR environment and am getting this warning in dev:

⚠️ 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://fb.me/react-uselayouteffect-ssr for common fixes.

This is a fairly common issue - in this case, it's a false alarm since useDebugDashboard's useLayoutEffect usage won't affect the rehydrated React tree. A common solution is to use a custom useIsomorphicLayoutEffect hook which only calls useLayoutEffect on the client, as seen in libraries like react-redux.

I'm fairly certain this will be a functional noop, though please double check me!

I confirm that this contribution is made under the terms of the license found in the root directory of this repository's source tree and that I have the authority necessary to make this contribution on behalf of its copyright owner.

@redonkulus 8000 redonkulus merged commit 31db1bf into yahoo:master Mar 29, 2022
@roderickhsiao roderickhsiao mentioned this pull request Mar 30, 2022
Merged
@chrissantamaria chrissantamaria deleted the useIsomorphicLayoutEffect branch March 30, 2022 04:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@redonkulus redonkulus redonkulus approved these changes

@roderickhsiao roderickhsiao roderickhsiao approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@chrissantamaria @redonkulus @roderickhsiao
0