Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#11,149 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@cloudfluffy ci sta già lavorando.

Dal 7/8/2026.

  • #11150 di @cloudfluffy — aperta

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
devtools, frontend, performance

Direzione di ricerca

Inizia dal percorso di mounting del pannello DevTools descritto nella riproduzione e analizza come le query e le mutation memorizzate nella cache diventano righe. Traccia le sottoscrizioni alla cache usate dai riquadri dei dettagli e dai badge di stato, incluse le scansioni complete ripetute della cache e gli eventi della cache. Usa il CodeSandbox collegato con migliaia di query osservate; il lavoro è completato quando l’apertura del pannello e il fatto di lasciarlo aperto non causano più un blocco percepibile del thread principale.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
TypeScript
Stelle
50.4k
Fork
4.2k
Merge medio
7h 29m
PR unite (30g)
393

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TanStack/query

Tutte le issue di TanStack/query

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.