Hydration error using loading state of useQuery when prefetching

Describe the bug

If you prefetch data on the server and then use useQuery with isLoading on the client, it can lead to a hydration error.

Your minimal, reproducible example

https://stackblitz.com/~/github.com/Icestonks/react-query-trpc-test

Steps to reproduce

1. Prefetch something on the server
2. Hydrate it to the client
3. Use useQuery in the client, and have a loading fallback with isLoading.

Then there should come a hydration error.

Expected behavior

When first building and starting the project, we should see an hydration error. The error can also come at other times, but that's the most reliable way, to get the error to occur.

How often does this bug happen?

Sometimes

Screenshots or Videos

Platform

• OS: Windows
• Browser: Google Chrome
• Browser version: 138.0.7204.100

Tanstack Query adapter

react-query

TanStack Query version

5.82.0

TypeScript version

5.8.3

Additional context

Initially, the issue was thought to be related to tRPC, so there has been some discussion about the error over there: https://github.com/trpc/trpc/issues/6740

Would highly recommend reading some of the comments from that issue. Could maybe also give some more context.

Start with the linked StackBlitz reproduction and trace the server prefetch, client hydration, and useQuery isLoading rendering path. Read the related tRPC issue for context; done means the reproduction no longer produces a hydration error after building and starting the project.