TanStack / TanStack/query

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

Open
#11,149 0 comments 0 reactions 0 assignees View on GitHub

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
  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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.