feat: add e2e and perf tests for useExperimentalDOMVirtualizer with hook injection

[piecyk]

🎯 Changes

Performance Comparison: useVirtualizer vs useExperimentalDOMVirtualizer

All 32 tests passed (34.7s).

Metric	useVirtualizer	useExperimentalVirtualizer	Difference
Initial render	30.1ms, 3 renders	26.3ms, 3 renders	~13% faster
Scroll 200×100px	60.0 fps, 407 renders	59.9 fps, 215 renders	47% fewer renders
Scroll 500×20px	60.1 fps, 410 renders	60.1 fps, 264 renders	36% fewer renders
scrollToIndex(5000)	4 renders	5 renders	similar
Round-trip (9999→0)	6 renders	6 renders	identical

Key Takeaways

• The experimental hook cuts React render count nearly in half during continuous scrolling while maintaining the same 60fps.
• Both hooks achieve identical frame rates — the render savings translate to lower CPU usage and better battery life.
• The difference will be more pronounced on slower devices or with heavier item components.

How it works

useExperimentalVirtualizer bypasses React re-renders for item positioning by directly mutating DOM styles (transform, height) during scroll. It only triggers a React re-render when the visible range or isScrolling state changes, which happens far less frequently than per-frame position updates.

Test setup

• 10,000 items with random heights (25–100px)
• Scroll container: 400px height, contain: strict, overflowAnchor: none
• Playwright + Chromium, production build

✅ 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: 1cd67a0

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 1cd67a0

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

---

☁️ Nx Cloud last updated this comment at 2026-03-10 04:06:40 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@1141

@tanstack/lit-virtual

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

@tanstack/react-virtual

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

@tanstack/solid-virtual

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

@tanstack/svelte-virtual

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

@tanstack/virtual-core

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

@tanstack/vue-virtual

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

commit: 9b1efe8