-
Notifications
You must be signed in to change notification settings - Fork 77
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
Suspense - hydration error on page refresh #1
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
In development mode on page refresh this error appears. It is related to this code in
layouts/PageLayout/PageLayout.tsx
:It's related to logged in user being fetched between two Suspense boundaries, and that user object affects states in child components, causing difference on client and server. It is enough to remove inner Suspense boundary to prevent the error. Another way to prevent it is to render null in
MeProvider
when useMe is in loading state, but that causes entire UI to flicker.This error is easy to reproduce when query keys mismatch in
prefetchQuery
ingetServerSideProps
and client sideuseQuery
. But some other state mismatch between client and server also causes this error, I wasn't able to determine which state mismatch exactly.Here is the link of test case repository for reproduction:
https://github.com/nemanjam/hydration-test-case
To Reproduce
Start app in development mode, login as any user, go to profile or home page and refresh it few times, this error will appear. In production build it doesn't seem to appear.
Expected behavior
Error should not appear on page refresh.
Screenshots
Environment (please complete the following information):
Additional context
Here is related issue in React repository but suggested solution to memoize children prop does not prevent error and just causes stale links in navbar.
facebook/react#24476 (comment)
The text was updated successfully, but these errors were encountered: