Devtools panel freezes the page for minutes when the query cache holds thousands of observed queries

[cloudfluffy]

Describe the bug

Opening the devtools against a QueryClient holding a few thousand queries blocks the main thread for minutes. The tab stops responding entirely — no scrolling, no clicks, no animation — and stays that way until the panel finishes mounting.

The panel renders one row per cached query and per cached mutation with no windowing, and each row registers several cache subscriptions, so the work done on open scales with the size of the cache rather than with what is visible. Several subscriptions also walk the whole cache on every cache event: the details panes resolve their selected item by scanning until they find a match, and the status badges count the entire cache once per status. Nothing throttles that, and each setQueryData emits two cache events, so an application that is still loading data keeps the panel re-doing all of it.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/brave-microservice-8kltf4

Steps to reproduce

1. Open the example and let the list build for a few seconds.
2. Press Open the devtools.
3. Try to scroll the page. Nothing responds — the spinner stops and scrolling and clicks do nothing. The page stays frozen for minutes.
4. When it recovers, the readout under the spinner reports the longest unbroken freeze.

Expected behavior

Opening the devtools should not block the main thread for a noticeable period, and keeping it open should not make the application unresponsive.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

OS: Windows 11
Browser: Edge
Version: 151.0.4129.59

Tanstack Query adapter

react-query

TanStack Query version

v5.101.4

TypeScript version

v5.9.2

Additional context

No response