docs(vue-virtual): use `onUpdated` to prevent scroll jumping by Mini-ghost · Pull Request #1125 · TanStack/virtual

Mini-ghost · 2026-02-17T04:09:48Z

🎯 Changes

✅ 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 · 2026-02-17T04:09:52Z

⚠️ No Changeset found

Latest commit: 893ad75

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

…roll jumping

nx-cloud · 2026-03-12T18:33:02Z

View your CI Pipeline Execution ↗ for commit 893ad75

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

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

pkg-pr-new · 2026-03-12T18:33:20Z

More templates

@tanstack/angular-virtual

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

@tanstack/lit-virtual

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

@tanstack/react-virtual

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

@tanstack/solid-virtual

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

@tanstack/svelte-virtual

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

@tanstack/virtual-core

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

@tanstack/vue-virtual

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

commit: fccf707

Copilot

Pull request overview

Updates the Vue “dynamic” virtualizer examples to re-measure items after Vue DOM updates (using onUpdated) to address scroll stutter/jump issues reported in the Vue dynamic height demos.

Changes:

Replaced per-item ref callback measurement with collecting item elements via a template ref array.
Added measureAll() and invoked it from onMounted and onUpdated to measure rendered items post-render.
Adjusted Vue imports accordingly across the affected example components.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 10 comments.

File	Description
examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue	Switches to batched measuring via template refs + `onUpdated` for window-scrolling dynamic rows.
examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue	Switches to batched measuring via template refs + `onUpdated` for container-scrolling dynamic rows.
examples/vue/dynamic/src/components/GridVirtualizerDynamic.vue	Switches to batched measuring via template refs + `onUpdated` for dynamic grid row measurement.
examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue	Switches to batched measuring via template refs + `onUpdated` for dynamic columns.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-12T18:36:50Z

examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue

+function measureAll() {
+  virtualItemEls.value.forEach((el) => {
+    if (el) rowVirtualizer.value.measureElement(el)
+  })
 }


measureAll never calls rowVirtualizer.value.measureElement(null). In @tanstack/virtual-core, passing null is what triggers cleanup of disconnected nodes (unobserving/removing stale entries from elementsCache). Without that, items that scroll out/unmount can remain observed/retained. Consider calling measureElement(null) once per update (or using a callback ref that forwards null on unmount) in addition to measuring the current elements.

Copilot · 2026-03-12T18:36:50Z

examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue

-  if (!el) {
-    return
-  }
+const virtualItemEls = shallowRef([])


shallowRef([]) with an empty array literal infers never[] in TypeScript, which can make el in forEach be never and cause type errors when passing it to measureElement. Consider explicitly typing virtualItemEls (e.g. as an array of HTMLElement | null).

Suggested change

const virtualItemEls = shallowRef([])

const virtualItemEls = shallowRef<(HTMLElement | null)[]>([])

Copilot · 2026-03-12T18:36:51Z

examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue

+function measureAll() {
+  virtualItemEls.value.forEach((el) => {
+    if (el) rowVirtualizer.value.measureElement(el)
+  })
 }


measureAll never calls rowVirtualizer.value.measureElement(null). In @tanstack/virtual-core, passing null is what triggers cleanup of disconnected nodes (unobserving/removing stale entries from elementsCache). Without that, items that scroll out/unmount can remain observed/retained. Consider calling measureElement(null) once per update (or using a callback ref that forwards null on unmount) in addition to measuring the current elements.

Copilot · 2026-03-12T18:36:51Z

examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue

-  }
-
-  rowVirtualizer.value.measureElement(el)
+const virtualItemEls = shallowRef([])


shallowRef([]) with an empty array literal infers never[] in TypeScript, which can make el in forEach be never and cause type errors when passing it to measureElement. Consider explicitly typing virtualItemEls (e.g. as an array of HTMLElement | null).

Suggested change

const virtualItemEls = shallowRef([])

const virtualItemEls = shallowRef<(HTMLElement | null)[]>([])

Copilot · 2026-03-12T18:36:51Z

examples/vue/dynamic/src/components/GridVirtualizerDynamic.vue

+function measureAll() {
+  virtualItemEls.value.forEach((el) => {
+    if (el) rowVirtualizer.value.measureElement(el)
+  })
 }


measureAll never calls rowVirtualizer.value.measureElement(null). In @tanstack/virtual-core, passing null is what triggers cleanup of disconnected nodes (unobserving/removing stale entries from elementsCache). Without that, rows that scroll out/unmount can remain observed/retained. Consider calling measureElement(null) once per update (or using a callback ref that forwards null on unmount) in addition to measuring the current elements.

Copilot · 2026-03-12T18:36:51Z

examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue

+onMounted(measureAll)
+onUpdated(measureAll)


onUpdated(measureAll) runs after every component update, including scroll-driven updates as virtualRows changes. Measuring all rendered items on every update can be expensive (forces layout reads) and may reintroduce scroll jank. Consider a more targeted trigger (e.g. defer measurement from an element ref callback post-render, or only measure newly mounted items) to avoid repeated full measurement passes.

Copilot · 2026-03-12T18:36:52Z

examples/vue/dynamic/src/components/GridVirtualizerDynamic.vue

-  }
-
-  rowVirtualizer.value.measureElement(el)
+const virtualItemEls = shallowRef([])


shallowRef([]) with an empty array literal infers never[] in TypeScript, which can make el in forEach be never and cause type errors when passing it to measureElement. Consider explicitly typing virtualItemEls (e.g. as an array of HTMLElement | null).

Suggested change

const virtualItemEls = shallowRef([])

const virtualItemEls = shallowRef<(HTMLElement | null)[]>([])

Copilot · 2026-03-12T18:36:52Z

examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue

+function measureAll() {
+  virtualItemEls.value.forEach((el) => {
+    if (el) columnVirtualizer.value.measureElement(el)
+  })
 }


measureAll never calls columnVirtualizer.value.measureElement(null). In @tanstack/virtual-core, passing null is what triggers cleanup of disconnected nodes (unobserving/removing stale entries from elementsCache). Without that, columns that scroll out/unmount can remain observed/retained. Consider calling measureElement(null) once per update (or using a callback ref that forwards null on unmount) in addition to measuring the current elements.

Copilot · 2026-03-12T18:36:52Z

examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue

+onMounted(measureAll)
+onUpdated(measureAll)


onUpdated(measureAll) runs after every component update, including scroll-driven updates as virtualRows changes. Measuring all rendered items on every update can be expensive (forces layout reads) and may reintroduce scroll jank. Consider a more targeted trigger (e.g. defer measurement from an element ref callback post-render, or only measure newly mounted items) to avoid repeated full measurement passes.

Copilot · 2026-03-12T18:36:52Z

examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue

-  if (!el) {
-    return
-  }
+const virtualItemEls = shallowRef([])


shallowRef([]) with an empty array literal infers never[] in TypeScript, which can make el in forEach be never and cause type errors when passing it to measureElement. Consider explicitly typing virtualItemEls (e.g. as an array of HTMLElement | null).

Suggested change

const virtualItemEls = shallowRef([])

const virtualItemEls = shallowRef<(HTMLElement | null)[]>([])

piecyk

Let's add those rowVirtualizer.value.measureElement(null) to all measureAll

piecyk · 2026-03-12T20:01:23Z

examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue

+function measureAll() {
+  virtualItemEls.value.forEach((el) => {
+    if (el) columnVirtualizer.value.measureElement(el)
+  })


Calling measureElement(null) first ensures stale elements from previous renders are cleaned up before re-registering the current ones. Without it, if virtual items get recycled (scrolling removes old DOM nodes), those old nodes may linger in the cache until the ResizeObserver's own callback eventually notices they're disconnected. Adding the null call makes cleanup immediate and deterministic.

Suggested change

function measureAll() {

virtualItemEls.value.forEach((el) => {

if (el) columnVirtualizer.value.measureElement(el)

})

function measureAll() {

rowVirtualizer.value.measureElement(null)

virtualItemEls.value.forEach((el) => {

if (el) rowVirtualizer.value.measureElement(el)

})

Mini-ghost added 2 commits February 17, 2026 13:05

docs(vue-virtual): use onUpdated for measureElement to prevent sc…

8ffbf22

…roll jumping

chore: run lint

893ad75

Mini-ghost force-pushed the docs/vue-dynamic-measure-timing branch from ecdfd90 to 893ad75 Compare February 17, 2026 05:05

piecyk requested a review from Copilot March 12, 2026 18:32

Copilot started reviewing on behalf of piecyk March 12, 2026 18:32 View session

Copilot AI reviewed Mar 12, 2026

View reviewed changes

piecyk requested changes Mar 12, 2026

View reviewed changes

	const virtualItemEls = shallowRef([])
	const virtualItemEls = shallowRef<(HTMLElement \| null)[]>([])

		onMounted(measureAll)
		onUpdated(measureAll)

		onMounted(measureAll)
		onUpdated(measureAll)

Uh oh!

Conversation

Mini-ghost commented Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Uh oh!

changeset-bot bot commented Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

nx-cloud bot commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Mar 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

piecyk left a comment

Choose a reason for hiding this comment

Uh oh!

piecyk Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Mini-ghost commented Feb 17, 2026 •

edited

Loading

changeset-bot bot commented Feb 17, 2026 •

edited

Loading

nx-cloud bot commented Mar 12, 2026 •

edited

Loading