Devtools panel freezes the page for minutes when the query cache holds thousands of observed queries
维护者通常 1 天内回复
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 48/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 冷清
- 技术栈
- react, typescript
- 领域
- devtools, frontend, performance
调研方向
从复现中描述的 DevTools 面板挂载路径开始，检查缓存的 queries 和 mutations 如何变成行。跟踪详情面板和状态徽章使用的缓存订阅，包括反复进行的完整缓存扫描和缓存事件。使用链接的 CodeSandbox，其中有数千个已观察的 queries；当打开面板并保持其打开不再导致主线程出现明显卡顿时，即表示完成。
由索引模型根据 Issue 内容生成。
描述
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
- 主要语言
- TypeScript
- 星标
- 50.4k
- 派生
- 4.2k
- 平均合并
- 11 小时 33 分钟
- 30 天内合并 PR
- 421
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
TanStack/query 的其他 Issue
-
solid-query: STRICT_READ_UNTRACKED on Solid 2 — client()/options() read in component body (useMutation, useBaseQuery)可能重新可做 关联的 PR 已关闭且未合并。 未关闭
难度 2/5 1-3 小时 新手友好度 84/100
TanStack/query#11358 · 2 条评论 · 1 个 reaction ·
维护者通常 1 天内回复
-
solid-query: switching the queryClient accessor strands the new client's cache (subscription stays on the old observer)可能已有人在做 @MaNaN1803 于 75 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 84/100
TanStack/query#11106 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 45/100
维护者通常 1 天内回复
-
setQueryData: NoInfer loses discriminated-union members when spreading a narrowed updater value可能已有人在做 @iosayin 于 1 天前认领。 未关闭
难度 4/5 3-5 天 新手友好度 55/100
维护者通常 1 天内回复
-
setQueryData updater loses discriminated-union fields when spreading inferred NoInfer data可能已有人在做 @boriskozak 于 1 天前认领。 未关闭
难度 4/5 3-5 天 新手友好度 68/100
TanStack/query#11794 · 1 条评论 ·
维护者通常 1 天内回复
相似的 Issue
-
bot:ai-assisted status:untriaged
难度 2/5 1-3 小时 新手友好度 85/100
midnightntwrk/midnight-js#1424 ·
维护者通常 1 天内回复
-
enhancement
难度 2/5 1-3 小时 新手友好度 68/100
mksglu/context-mode#1268 ·
维护者通常 5 天内回复
-
[bug] Setup fails with "Cannot find matching keyid" when an older Node's corepack is on PATH可能已有人在做 @EyalPoly 今天认领。 未关闭
难度 2/5 1-3 小时 新手友好度 72/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
MystenLabs/MemWal#1124 · 2 条评论 ·
维护者通常 1 天内回复
-
Edit:未关闭check:failed streams:edit
难度 2/5 1-3 小时 新手友好度 60/100
维护者通常 1 天内回复