Skip to content

fix(virtual-core): Notify framework when count changes to update getTotalSize() #1085

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
piecyk merged 4 commits into from
Dec 8, 2025
+24 −0
Merged

fix(virtual-core): Notify framework when count changes to update getTotalSize() #1085

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
73f744b
Fix: Notify framework when count changes to update getTotalSize()
shunn2 Dec 3, 2025
04f12ca
feat: add changeset
shunn2 Dec 3, 2025
680867c
Merge remote-tracking branch 'upstream/main'
shunn2 Dec 8, 2025
0024982
refactor: apply skipInitialOnChange and use isScrolling parameter in …
shunn2 Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions .changeset/notify-on-count-change.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
'@tanstack/virtual-core': patch
'@tanstack/react-virtual': patch
'@tanstack/vue-virtual': patch
'@tanstack/svelte-virtual': patch
'@tanstack/solid-virtual': patch
'@tanstack/angular-virtual': patch
'@tanstack/lit-virtual': patch
---

Fix: Notify framework when count changes to update getTotalSize()

Fixed an issue where `getTotalSize()` would return stale values when the `count` option changed (e.g., during filtering or search operations). The virtualizer now automatically notifies the framework when measurement-affecting options change, ensuring the UI updates correctly without requiring manual `useMemo` workarounds.

**Before**: When filtering items, the list container would maintain its previous height, causing excessive blank space (when count decreased) or inaccessible items (when count increased).

**After**: Height updates automatically when count changes, providing the correct user experience.

This fix applies to all framework adapters and has minimal performance impact (< 0.1ms per change).
4 changes: 4 additions & 0 deletions packages/virtual-core/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -646,6 +646,10 @@ export class Virtualizer<
},
{
key: false,
onChange: () => {
// Notify when measurement options change as they affect total size
this.notify(false)
},
Comment on lines 650 to 653
Copy link
Collaborator

@piecyk piecyk Dec 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shunn2 I created a PR earlier (#1088) that adds an initialization guard to the memo system so we avoid the extra initial notify call. This keeps the onChange semantics consistent (only firing when state actually changes), preserves the existing React re-render count expectations, and still fixes the stale getTotalSize issue.

With that now merged into master, you can simplify this block to

Suggested change
onChange: () => {
// Notify when measurement options change as they affect total size
this.notify(false)
},
skipInitialOnChange: true
onChange: () => {
// Notify when measurement options change as they affect total size
this.notify(this.isScrolling)
},

Copy link
Contributor Author

@shunn2 shunn2 Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@piecyk Thank you for the helpful changes!
I think your work will lead to even better results.
I will reflect your feedback and let you know.

Copy link
Contributor Author

@shunn2 shunn2 Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

0024982
I applied your review. Thanks 🙏

Copy link
Collaborator

@piecyk piecyk Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Passing this.isScrolling is correct here, as options can change while the user is scrolling, and in that case we do want the framework to know the update happened in a scrolling context. Using this.isScrolling keeps the onChange notification semantics aligned with the rest of the virtualizer and preserves the adapters’ scroll-specific optimizations.

Copy link
Contributor Author

@shunn2 shunn2 Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I agree. Thanks for the explanation.

},
)

Expand Down
Loading