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

unnecessary rerenders of every row and cell in examples/react/editable-data

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

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

Chưa có ai nhận issue này.

Đá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
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend, performance

Hướng nghiên cứu

Bắt đầu trong examples/react/editable-data và tái hiện luồng chỉnh sửa bằng React DevTools profiler. Theo dõi tham chiếu không ổn định cell.getContext() và xác định liệu hành vi của ví dụ hay của bảng có khiến tất cả các hàng và ô được render lại hay không. Hoàn tất khi việc chỉnh sửa một ô không còn render lại các ô không liên quan và kết quả profiling đã được xác minh trên ví dụ.

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

Mô tả

Describe the bug

Every time one cell is edited in the examples/react/editable-data example, the entire table rerenders. If a user wants to render a large amount of rows, this strategy will start getting slow. At 50 rows in the example it takes 14.4 milliseconds to rerender the whole table with basic data. I've narrowed the unstable reference down to cell.getContext().

Your minimal, reproducible example

https://github.com/TanStack/table/tree/main/examples/react/editable-data

Steps to reproduce
  1. Open react dev tools profiler
  2. Start profiling
  3. Click on a cell to edit it
  4. Click off the cell
  5. Stop the profiler
  6. Check the results
Expected behavior

Only the affected cell should rerender unless my other cells have a direct dependency on it. I've even tried creating memoized components all the way down to the cell.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows

react-table version

8.8.5

TypeScript version

No response

Additional context

If this is something the library doesn't support then I think there should be a documentation section on it describing the pitfalls of rendering a large amount of rows and/or using complex cells.

Terms & Code of Conduct
  • I agree to follow this project's Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Ngôn ngữ chính
TypeScript
Star
28.5k
Fork
3.6k
Merge trung bình
19 giờ 40 phút
Pull request đã merge (30 ngày)
8

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

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

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.