test(react-virtual): add e2e test for React Compiler with directDomUpdates, bump react to 19 by piecyk · Pull Request #1187 · TanStack/virtual · GitHub
Skip to content

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

Merged
piecyk merged 1 commit into
TanStack:mainfrom
piecyk:damian/e2e-react-compiler-direct-dom-updates
Jun 2, 2026
Merged

piecyk merged 1 commit into
TanStack:mainfrom
piecyk:damian/e2e-react-compiler-direct-dom-updates

Conversation

@piecyk

@piecyk piecyk commented Jun 2, 2026 •

Copy link
Copy Markdown
Collaborator

🎯 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).

Summary by CodeRabbit

  • New Features

    • Upgraded to React 19 support across all examples and core packages
    • Added React Compiler integration with end-to-end testing
  • Bug Fixes

    • Fixed directDomUpdates positioning behavior in position and transform modes

@coderabbitai

coderabbitai Bot commented Jun 2, 2026 •

Copy link
Copy Markdown

@nx-cloud

nx-cloud Bot commented Jun 2, 2026 •

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 534fa4e

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

☁️ Nx Cloud last updated this comment at 2026-06-02 08:09:12 UTC

@socket-security

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Added@​types/​react-dom@​19.2.31001007585100
Added@​types/​react@​19.2.161001007995100
Addedbabel-plugin-react-compiler@​1.0.01001007996100
Updatedreact@​18.3.1 ⏵ 19.2.7100 +11008497100
Addedreact-dom@​19.2.71001009298100

View full report

@pkg-pr-new

pkg-pr-new Bot commented Jun 2, 2026

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
packages/react-virtual/e2e/app/react-compiler/main.tsx (1)

73-77: ⚡ Quick win

Consider adding a comment to clarify the conditional styling logic.

The triple-nested ternary controlling top and transform is correct but complex. When directDomUpdates is enabled, the virtualizer writes positioning directly to the DOM:

  • mode='transform': virtualizer writes transform: translate3d(...), so we provide top: 0 as a base
  • mode='position': virtualizer writes top: ...px, so we omit it from the initial style

A brief inline comment would help future maintainers understand why the styles differ by mode.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/react-virtual/e2e/app/react-compiler/main.tsx` around lines 73 - 77,
Add a brief inline comment explaining the nested ternary that sets top and
transform based on directDom (or directDomUpdates) and mode: clarify that when
directDom is true and mode === 'transform' we set top: 0 because the virtualizer
will write translate3d to the DOM, whereas when mode === 'position' we omit top
because the virtualizer will set top directly; likewise note the fallback for
non-directDom that sets both top: 0 and transform using v.start. Place this
comment next to the expression that uses directDom, mode, and v.start to make
the intent clear for future maintainers.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/react-virtual/e2e/app/react-compiler/main.tsx`:
- Around line 73-77: Add a brief inline comment explaining the nested ternary
that sets top and transform based on directDom (or directDomUpdates) and mode:
clarify that when directDom is true and mode === 'transform' we set top: 0
because the virtualizer will write translate3d to the DOM, whereas when mode ===
'position' we omit top because the virtualizer will set top directly; likewise
note the fallback for non-directDom that sets both top: 0 and transform using
v.start. Place this comment next to the expression that uses directDom, mode,
and v.start to make the intent clear for future maintainers.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6de9e63b-97a8-48b9-9347-555ab33db9fb

📥 Commits

Reviewing files that changed from the base of the PR and between b983b21 and 534fa4e.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (21)
  • benchmarks/package.json
  • examples/react/chat/package.json
  • examples/react/dynamic/package.json
  • examples/react/fixed/package.json
  • examples/react/infinite-scroll/package.json
  • examples/react/padding/package.json
  • examples/react/pretext/package.json
  • examples/react/pretext/src/main.tsx
  • examples/react/scroll-padding/package.json
  • examples/react/smooth-scroll/package.json
  • examples/react/sticky/package.json
  • examples/react/table/package.json
  • examples/react/variable/package.json
  • examples/react/window/package.json
  • knip.json
  • packages/react-virtual/e2e/app/react-compiler-vite.config.ts
  • packages/react-virtual/e2e/app/react-compiler/index.html
  • packages/react-virtual/e2e/app/react-compiler/main.tsx
  • packages/react-virtual/e2e/app/test/react-compiler.spec.ts
  • packages/react-virtual/package.json
  • packages/react-virtual/playwright.config.ts

@piecyk
piecyk merged commit 932c358 into TanStack:main Jun 2, 2026
10 checks passed
kklem0 added a commit to kklem0/virtual that referenced this pull request Jul 27, 2026
…mpatibility

React Compiler skips any component calling useVirtualizer as a
known-incompatible API: the hook returns a stable instance whose
getVirtualItems()/getTotalSize() read mutable internal state during render,
so a memoizing compiler caches the first result keyed on the stable
instance and the list never updates (TanStack#736, TanStack#743). The skip keeps apps
correct but leaves every consuming component un-memoized (TanStack#1119).

useVirtualizerSnapshot (and useWindowVirtualizerSnapshot) return the
render-facing values as immutable snapshot data instead, via
useSyncExternalStore (official shim, preserving the React >=16.8 peer
range): virtualItems and totalSize change identity exactly when the
computed geometry changes, while the stable virtualizer instance rides
along for imperative APIs (measureElement, scrollToIndex, ...). Because the
compiler's skip is keyed on the imported property name, components
consuming the snapshot hooks compile - and memoize correctly - today.

- snapshot cache rebuilt lazily on onChange, with part-comparison so
  notifications that change nothing visible (isScrolling flips) publish
  the same reference and skip the re-render
- user onChange still chained; useFlushSync semantics preserved
- unit tests pin the identity contract (stable across unrelated
  re-renders, fresh on geometry change), StrictMode, and SSR via
  getServerSnapshot
- compiler-contract tests run babel-plugin-react-compiler in CI: snapshot
  consumers emit the _c() memo cache, useVirtualizer consumers stay
  skipped
- e2e: a compiled snapshot-hook page under the existing react-compiler
  build (TanStack#1187 infra) proving the TanStack#736 scenario now passes with the
  consumer compiled
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant