Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#11,149 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@cloudfluffy đang làm issue này rồi.

Từ ngày 7/8/2026.

  • #11150 của @cloudfluffy — đang mở

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
react, typescript
Lĩnh vực
devtools, frontend, performance

Hướng nghiên cứu

Bắt đầu với đường dẫn mounting của bảng DevTools được mô tả trong phần tái hiện và kiểm tra cách các query và mutation được cache trở thành các hàng. Theo dõi các đăng ký cache được các khung chi tiết và badge trạng thái sử dụng, bao gồm cả các lần quét toàn bộ cache lặp lại và các sự kiện cache. Sử dụng CodeSandbox được liên kết với hàng nghìn query được quan sát; hoàn thành khi việc mở và giữ bảng mở không còn gây ra hiện tượng đóng băng đáng kể trên main thread.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
50.4k
Fork
4.2k
Merge trung bình
11 giờ 33 phút
Pull request đã merge (30 ngày)
421

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của TanStack/query

Tất cả issue của TanStack/query

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.