NextJS 13 hydration errors with react query

[resthedev]

I am getting the following error:

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <div>.

Here is a CodeSandbox reproducing the issue.

There are two queries in order to demonstrate the error happening when components mount and shared queries starting/finishing at different times:

1. Getting posts
2. Getting beers

When console logging postsQuery.status in the BeersAndPosts component, I see that the error occurs during this scenario:

• On the server, the first status is loading
• On the client (browser), the first status is success.
  Hence, why there seems to be a mismatch.

The error seems to happen when the status on the client starts off immediately as success (seemingly skipping the loading status on first render). Which is why it's mismatched with what the server renders. My guess is that this mismatch error happens when different components mount at different times, shared queries start and finish at different times, and hence what's rendered on the client ends up being different from what the server rendered.

Any ideas why this could be happening or something I'm doing wrong? Any help would be greatly appreciated as it's been driving me a bit insane. Thank you!

[resthedev]

An idea I had on why this could be happening possibly.

Let's say I have two components that both run the same useQuery query:
Component A and Component B

Even if I have stale time set to 0, is it possible that the queries in these components could be affecting each other and causing the mismatch error with the server?

[TkDodo]

Please show a runnable reproduction, e.g. codesandbox. You're not even showing react-query code - potentially lives in useContractAddress and useContractInfo. How should we able to help without that information ?

[resthedev]

has something changed in the meantime? I see no hydration errors in the sandbox, it seems to work just fine ... 🤔

Seems like it doesn't reproduce every single time but if you click Go to test and then use the refresh page button on the code sandbox, it should pop up after a few refreshes.

[TkDodo]

hm. @Ephem do you know what's going on in that sandbox?

[TkDodo]

could this be because of our missing getServerSideSnapshot implementation of useSyncExternalStore ?

[Ephem]

Great Sandbox, clean and minimal and demonstrates the problem well, thanks a lot!

I think this is indeed because we aren't snapshotting the initial state and using that in useSyncExternalStore. Issue tracking this: #4690

So when posts are fetched on the client before beers are fetched on the server, the server will not render any posts in BeersAndPosts and the client will render posts in BeersAndPosts causing the mismatch. When we implement this correctly, client will match the server for the initial markup hydration and then it will re-render correctly with the posts.

While a "known" problem, this is the best reproduction I've seen that demonstrates what can happen, so thanks again.

[TkDodo]

I've added the sandbox to the issue 👍

[sourabhLX]

any soluction or work around 🙌🙌

[SSOURABH58]

I found a work using one of the recommended ways

just add a IsHydrated state and default to false and set it to true on useEffect

since useEffect is called during hydration next js will not complain

 const [IsHydrated, setIsIsHydrated] = useState(false);
   useEffect(() => {
        setIsIsHydrated(true);
    }, []);
    
   return <div> {IsHydrated&&<child/>}</div>