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

Virtualized list wrapper keeps stale height after data changes

Đang mở
  • Có gì không ổn?
#1,077 2 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

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

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
55/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
frontend, performance

Hướng nghiên cứu

Bắt đầu bằng cách tìm component List sử dụng useWindowVirtualizer và kiểm tra cách rows.length cùng getTotalSize() được đưa vào style của wrapper. So sánh hành vi với commit da4a20196356fd7d96e0fb9b69be9bd662294eeb và tái hiện một thay đổi về bộ lọc hoặc phân trang. Hoàn tất khi chiều cao của wrapper và thanh cuộn phản ánh số hàng đã cập nhật mà không có khoảng trống dư thừa.

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

Mô tả

Describe the bug
Summary

List uses useWindowVirtualizer for row virtualization, but the outer div’s inline
height is read directly from rowVirtualizer.getTotalSize() during render. Because the
virtualizer instance is stable and the getter mutates internal state without changing referential
identity, React never receives a new height value when the rows array is filtered or otherwise
resized. The wrapper therefore preserves an outdated, overly tall height, leaving a large blank
spacer below the visible rows and causing scroll position jumps.

Impact

Any operation that changes the number of rows (search, filters, pagination reset) leaves the
list container at its previous height. Users see excessive empty space and the scroll bar no
longer reflects the actual result size.

Root Cause

getTotalSize() is invoked inline inside JSX. The virtualizer recomputes its measurement cache,
but React doesn’t detect that the returned string (e.g., "32000px") should change because the
component never re-renders with a different computed value tied to the rows count.

Fix in my case

Memoize the total height using useMemo(() => rowVirtualizer.getTotalSize(), [rowVirtualizer, rows.length]) and pass that memoized number to the style prop. This forces a fresh height
string whenever the virtualizer’s count changes, keeping the spacer in sync. Implemented in commit

Your minimal, reproducible example

https://github.com/kosovatools/kosovatools.org/commit/da4a20196356fd7d96e0fb9b69be9bd662294eeb

Steps to reproduce

.

Expected behavior

Height react to count change

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Firefox

tanstack-virtual version

3.13.12

TypeScript version

5.7.3

Additional context

No response

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
7.1k
Fork
472
Merge trung bình
1 ngày 2 giờ
Pull request đã merge (30 ngày)
12

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

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

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.