Devtools panel freezes the page for minutes when the query cache holds thousands of observed queries
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 50.3k
- Forks
- 4.2k
- Avg merge
- 18h 25m
- Merged PRs (30d)
- 200
Description
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
- Open the example and let the list build for a few seconds.
- Press Open the devtools.
- Try to scroll the page. Nothing responds — the spinner stops and scrolling and clicks do nothing. The page stays frozen for minutes.
- 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the devtools panel mounting path described in the reproduction and inspect how cached queries and mutations become rows. Trace the cache subscriptions used by the details panes and status badges, including the repeated full-cache scans and cache events. Use the linked CodeSandbox with thousands of observed queries; done means opening and keeping the panel open no longer causes a noticeable main-thread freeze.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- devtools, frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100