test(react-virtual): add e2e test for React Compiler with directDomUpdates, bump react to 19 (TanStack#1187)

piecyk · web-flow · commit 932c3588a00c · 2026-06-02T10:19:00.000+02:00
diff --git a/benchmarks/package.json b/benchmarks/package.json
@@ -12,16 +12,16 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "workspace:*",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "react-virtuoso": "^4.15.0",
     "react-window": "^2.2.4",
     "virtua": "^0.49.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.53.1",
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.5.2",
     "typescript": "5.6.3",
     "vite": "^6.4.2"
diff --git a/examples/react/chat/package.json b/examples/react/chat/package.json
@@ -9,12 +9,12 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.5.2",
     "typescript": "5.6.3",
     "vite": "^6.4.2"
diff --git a/examples/react/dynamic/package.json b/examples/react/dynamic/package.json
@@ -10,13 +10,13 @@
   "dependencies": {
     "@faker-js/faker": "^8.4.1",
     "@tanstack/react-virtual": "^3.14.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
     "@types/node": "^24.5.2",
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.5.2",
     "typescript": "5.6.3",
     "vite": "^6.4.2"
diff --git a/examples/react/fixed/package.json b/examples/react/fixed/package.json
@@ -9,13 +9,13 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
     "@types/node": "^24.5.2",
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.5.2",
     "typescript": "5.6.3",
     "vite": "^6.4.2"
diff --git a/examples/react/infinite-scroll/package.json b/examples/react/infinite-scroll/package.json
@@ -11,12 +11,12 @@
   "dependencies": {
     "@tanstack/react-query": "^5.80.7",
     "@tanstack/react-virtual": "^3.14.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.5.2",
     "vite": "^6.4.2"
   }
diff --git a/examples/react/padding/package.json b/examples/react/padding/package.json
@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.5.2",
     "vite": "^6.4.2"
   }
diff --git a/examples/react/pretext/package.json b/examples/react/pretext/package.json
@@ -10,13 +10,13 @@
   "dependencies": {
     "@chenglou/pretext": "^0.0.7",
     "@tanstack/react-virtual": "^3.14.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
     "@types/node": "^24.5.2",
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.5.2",
     "typescript": "5.6.3",
     "vite": "^6.4.2"
diff --git a/examples/react/pretext/src/main.tsx b/examples/react/pretext/src/main.tsx
@@ -116,7 +116,7 @@ function estimateMessageHeight(message: Message, viewportWidth: number) {
   )
 }
 
-function useElementWidth(ref: React.RefObject<HTMLElement>) {
+function useElementWidth(ref: React.RefObject<HTMLElement | null>) {
   const [width, setWidth] = React.useState(DEFAULT_VIEWPORT_WIDTH)
 
   React.useLayoutEffect(() => {
diff --git a/examples/react/scroll-padding/package.json b/examples/react/scroll-padding/package.json
@@ -11,12 +11,12 @@
   "dependencies": {
     "@react-hookz/web": "^25.1.1",
     "@tanstack/react-virtual": "^3.14.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.5.2",
     "vite": "^6.4.2"
   }
diff --git a/examples/react/smooth-scroll/package.json b/examples/react/smooth-scroll/package.json
@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.5.2",
     "vite": "^6.4.2"
   }
diff --git a/examples/react/sticky/package.json b/examples/react/sticky/package.json
@@ -12,13 +12,13 @@
     "@faker-js/faker": "^8.4.1",
     "@tanstack/react-virtual": "^3.14.2",
     "lodash": "^4.17.21",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.17",
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.5.2",
     "vite": "^6.4.2"
   }
diff --git a/examples/react/table/package.json b/examples/react/table/package.json
@@ -12,12 +12,12 @@
     "@faker-js/faker": "^8.4.1",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.14.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.5.2",
     "vite": "^6.4.2"
   }
diff --git a/examples/react/variable/package.json b/examples/react/variable/package.json
@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.5.2",
     "vite": "^6.4.2"
   }
diff --git a/examples/react/window/package.json b/examples/react/window/package.json
@@ -9,13 +9,13 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
     "@types/node": "^24.5.2",
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.5.2",
     "typescript": "5.6.3",
     "vite": "^6.4.2"
diff --git a/knip.json b/knip.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://unpkg.com/knip@5/schema.json",
   "ignoreWorkspaces": ["examples/**", "benchmarks"],
-  "ignoreDependencies": ["@angular/cli"],
+  "ignoreDependencies": ["@angular/cli", "babel-plugin-react-compiler"],
   "ignore": ["packages/react-virtual/e2e/app/**"]
 }
diff --git a/packages/react-virtual/e2e/app/react-compiler-vite.config.ts b/packages/react-virtual/e2e/app/react-compiler-vite.config.ts
@@ -0,0 +1,33 @@
+import path from 'node:path'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+const root = path.resolve(import.meta.dirname)
+
+export default defineConfig({
+  root,
+  plugins: [
+    react({
+      babel: {
+        plugins: [['babel-plugin-react-compiler', { target: '19' }]],
+      },
+    }),
+  ],
+  build: {
+    emptyOutDir: false,
+    rollupOptions: {
+      input: {
+        'react-compiler': path.resolve(root, 'react-compiler/index.html'),
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@tanstack/react-virtual': path.resolve(root, '../../src/index'),
+      '@tanstack/virtual-core': path.resolve(
+        root,
+        '../../../virtual-core/src/index',
+      ),
+    },
+  },
+})
diff --git a/packages/react-virtual/e2e/app/react-compiler/index.html b/packages/react-virtual/e2e/app/react-compiler/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/react-virtual/e2e/app/react-compiler/main.tsx b/packages/react-virtual/e2e/app/react-compiler/main.tsx
@@ -0,0 +1,89 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+const ITEM_SIZE = 40
+const COUNT = 1000
+
+/**
+ * Regression test for https://github.com/TanStack/virtual/issues/736
+ *
+ * React Compiler caches `virtualizer.getVirtualItems()` because the
+ * virtualizer reference is stable, so virtual items never update on scroll.
+ * Enabling `directDomUpdates` solves this: item positions are written
+ * directly to the DOM, and React only re-renders when the visible index
+ * range changes.
+ */
+const App = () => {
+  const parentRef = React.useRef<HTMLDivElement>(null)
+
+  const params = new URLSearchParams(window.location.search)
+  const mode = (params.get('mode') ?? 'transform') as 'position' | 'transform'
+  const directDom = params.get('directDomUpdates') !== 'false'
+
+  const renderCount = React.useRef(0)
+  renderCount.current += 1
+
+  const rowVirtualizer = useVirtualizer({
+    count: COUNT,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ITEM_SIZE,
+    overscan: 2,
+    directDomUpdates: directDom,
+    directDomUpdatesMode: mode,
+  })
+
+  return (
+    <div>
+      <div data-testid="render-count">{renderCount.current}</div>
+      <div data-testid="mode">{mode}</div>
+      <div data-testid="direct-dom">{String(directDom)}</div>
+      <button
+        id="scroll-to-500"
+        onClick={() => rowVirtualizer.scrollToIndex(500)}
+      >
+        Scroll to 500
+      </button>
+
+      <div
+        ref={parentRef}
+        id="scroll-container"
+        style={{ height: 400, overflow: 'auto' }}
+      >
+        <div
+          ref={directDom ? rowVirtualizer.containerRef : undefined}
+          id="inner"
+          style={{
+            position: 'relative',
+            width: '100%',
+            ...(directDom ? {} : { height: rowVirtualizer.getTotalSize() }),
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map((v) => (
+            <div
+              key={v.key}
+              data-testid={`item-${v.index}`}
+              ref={rowVirtualizer.measureElement}
+              data-index={v.index}
+              style={{
+                position: 'absolute',
+                left: 0,
+                width: '100%',
+                height: ITEM_SIZE,
+                ...(directDom
+                  ? mode === 'transform'
+                    ? { top: 0 }
+                    : {}
+                  : { top: 0, transform: `translateY(${v.start}px)` }),
+              }}
+            >
+              Row {v.index}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
diff --git a/packages/react-virtual/e2e/app/test/react-compiler.spec.ts b/packages/react-virtual/e2e/app/test/react-compiler.spec.ts
diff --git a/packages/react-virtual/package.json b/packages/react-virtual/package.json
diff --git a/packages/react-virtual/playwright.config.ts b/packages/react-virtual/playwright.config.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -116,7 +116,7 @@ function estimateMessageHeight(message: Message, viewportWidth: number) {`
`116`	`116`	`)`
`117`	`117`	`}`
`118`	`118`
`119`		`-function useElementWidth(ref: React.RefObject<HTMLElement>) {`
	`119`	`+function useElementWidth(ref: React.RefObject<HTMLElement \| null>) {`
`120`	`120`	`const [width, setWidth] = React.useState(DEFAULT_VIEWPORT_WIDTH)`
`121`	`121`
`122`	`122`	`React.useLayoutEffect(() => {`