bug: Maximum update depth exceeded in tRPC's `<HydrateClient>`

[bohdancho]

Provide environment information

System:
OS: macOS 15.4
CPU: (8) arm64 Apple M3
Memory: 208.34 MB / 16.00 GB
Shell: 3.7.1 - /opt/homebrew/bin/fish
Binaries:
Node: 23.11.0 - /opt/homebrew/bin/node
npm: 10.9.2 - /opt/homebrew/bin/npm
pnpm: 10.6.2 - ~/Library/pnpm/pnpm
bun: 1.2.8 - ~/.bun/bin/bun
Watchman: 2025.04.14.00 - /opt/homebrew/bin/watchman

Describe the bug

Running a scaffolded app with tRPC results in the following error from <HydrateClient> in the browser console:
Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

Reproduction repo

https://github.com/bohdancho/t3-app-tanstack-query-hydrateclient-bug

To reproduce

1. Clone the repository
2. Setup environment variables for Discord OAuth
3. Sign in
4. Confirm that the error is present in the browser console

Additional information

This is a known issue of TanStack Query. As per TanStack/query#8677 (comment), this bug was introduced in Tanstack Query v5.66.4. I suggest pinning the version to v5.66.3 until the issue is resolved upstream.

I would be happy to file a PR for this.

P.S.
The reproduction repository was initialized with the following settings:

• Tailwind
• tRPC
• NextAuth.js
• No ORM
• App router
• ESLint+Prettier

[yukosgiti]

Happened to me as well

with prisma orm and no auth, the rest are the same