perf(virtual-core): skip sync DOM reads during normal scrolling

[piecyk]

🎯 Changes

Inline _measureElement into measureElement and RO callback to simplify the measurement flow. During normal user scrolling, the ref callback (measureElement) now only registers the element with the ResizeObserver, the actual measurement is deferred to the async RO callback, avoiding layout thrashing from forced reflows.

Sync measurement in measureElement is gated behind scrollState, so it only runs during programmatic scrolling (scrollToIndex/scrollToOffset) where reconcileScroll needs sizes in the same frame to converge correctly.

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

[changeset-bot]

⚠️ No Changeset found

Latest commit: a1f20f5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit a1f20f5

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	✅ Succeeded	33s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	17s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-03-12 18:48:59 UTC

[pkg-pr-new]

More templates

• @tanstack/virtual-example-angular-dynamic
• @tanstack/virtual-example-angular-fixed
• @tanstack/virtual-example-angular-infinite-scroll
• @tanstack/virtual-example-angular-padding
• @tanstack/virtual-example-angular-smooth-scroll
• @tanstack/virtual-example-angular-sticky
• @tanstack/virtual-example-angular-table
• @tanstack/virtual-example-angular-variable
• @tanstack/virtual-example-angular-window
• tanstack-lit-virtual-example-dynamic
• tanstack-lit-virtual-example-fixed
• tanstack-react-virtual-example-dynamic
• tanstack-react-virtual-example-fixed
• tanstack-react-virtual-example-infinite-scroll
• tanstack-react-virtual-example-padding
• tanstack-react-virtual-example-scroll-padding
• tanstack-react-virtual-example-smooth-scroll
• tanstack-react-virtual-example-sticky
• tanstack-react-virtual-example-table
• tanstack-react-virtual-example-variable
• tanstack-react-virtual-example-window
• tanstack-svelte-virtual-example-dynamic
• tanstack-svelte-virtual-example-fixed
• tanstack-svelte-virtual-example-infinite-scroll
• tanstack-svelte-virtual-example-smooth-scroll
• tanstack-svelte-virtual-example-sticky
• tanstack-svelte-virtual-example-table
• tanstack-vue-virtual-example-dynamic
• tanstack-vue-virtual-example-fixed
• tanstack-vue-virtual-example-infinite-scroll
• tanstack-vue-virtual-example-padding
• tanstack-vue-virtual-example-scroll-padding
• tanstack-vue-virtual-example-smooth-scroll
• tanstack-vue-virtual-example-sticky
• tanstack-vue-virtual-example-table
• tanstack-vue-virtual-example-variable

@tanstack/angular-virtual

npm i https://pkg.pr.new/@tanstack/angular-virtual@1144

@tanstack/lit-virtual

npm i https://pkg.pr.new/@tanstack/lit-virtual@1144

@tanstack/react-virtual

npm i https://pkg.pr.new/@tanstack/react-virtual@1144

@tanstack/solid-virtual

npm i https://pkg.pr.new/@tanstack/solid-virtual@1144

@tanstack/svelte-virtual

npm i https://pkg.pr.new/@tanstack/svelte-virtual@1144

@tanstack/virtual-core

npm i https://pkg.pr.new/@tanstack/virtual-core@1144

@tanstack/vue-virtual

npm i https://pkg.pr.new/@tanstack/vue-virtual@1144

commit: 9b64003

[rf-]

@piecyk I just noticed an error in 3.13.22 that I think is related to this change:

ListView.tsx:204 Uncaught TypeError: Cannot read properties of undefined (reading 'id')
    at Object.getItemKey (ListView.tsx:204:66)
    at run (index.ts:417:54)
    at index.ts:430:15
    at Array.forEach (<anonymous>)
    at ResizeObserver.<anonymous> (index.ts:410:17)

This is coming from the this.elementsCache.delete(this.options.getItemKey(index)) call in this PR.

The getItemKey implementation is just (index: number) => items[index].id, and it's throwing because index is out of bounds for the updated list of children (i.e., it's larger than the count that was passed in on the last render).

I don't have a lot of context but this kind of seems related to #1135 too?

I can try to figure out a repro and file an issue, but just wanted to flag quickly in case the problem is super obvious to you.