Replace ReactDOM.render with createRoot in React padding example by nikhilsdabhade · Pull Request #1192 · TanStack/virtual

nikhilsdabhade · 2026-06-10T19:08:43Z

Replaced ReactDOM.render with createRoot in React padding example as the example was not even showing any preview in the docs.

Fixes #1190

Summary by CodeRabbit

Chores
- Updated React examples to use the modern React 18 initialization API while preserving existing rendering behavior.

coderabbitai · 2026-06-10T19:08:55Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: 1e37ea16-63b3-4e8c-b402-ab4d09fd9efb

📥 Commits

Reviewing files that changed from the base of the PR and between eacfca9 and aff8e72.

📒 Files selected for processing (6)

examples/react/infinite-scroll/src/main.tsx
examples/react/padding/src/main.tsx
examples/react/scroll-padding/src/main.tsx
examples/react/smooth-scroll/src/main.tsx
examples/react/sticky/src/main.tsx
examples/react/variable/src/main.tsx

📝 Walkthrough

Walkthrough

Six React examples now use the React 18 createRoot API. Each imports react-dom/client and renders the existing React.StrictMode tree through createRoot(...).render(...).

Changes

React 18 Root API Adoption

Layer / File(s)	Summary
React 18 root API adoption `examples/react/*/src/main.tsx`	The six examples replace `ReactDOM.render` with `ReactDOM.createRoot(...).render(...)`. The existing `React.StrictMode` and `App` trees remain unchanged.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk: ⚪ Minimal · up to eacfc

The React padding example now uses React 18 root rendering while preserving its existing StrictMode tree. No merge-blocking risk is currently identified.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description explains the change, its motivation, and the related issue. It does not include the required Changes, Checklist, or Release Impact headings and does not confirm the required checks or …	Add the template headings. Under Changes, describe the implementation and motivation. Complete the Contributing guide and local test checklist items. Select the appropriate Release Impact option, such as docs/CI/dev-only if applicable, and …
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the primary change: replacing ReactDOM.render with createRoot in the React padding example.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Description check

Explanation

The description explains the change, its motivation, and the related issue. It does not include the required Changes, Checklist, or Release Impact headings and does not confirm the required checks or release impact.

Resolution

Add the template headings. Under Changes, describe the implementation and motivation. Complete the Contributing guide and local test checklist items. Select the appropriate Release Impact option, such as docs/CI/dev-only if applicable, and state whether a changeset is required.

Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

coderabbitai · 2026-09-07T19:37:01Z

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

infinite-scroll, variable, sticky, scroll-padding and smooth-scroll were still using the legacy ReactDOM.render API, which was removed in React 19, so their docs sandboxes rendered blank just like the padding example. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Aligns the padding example with the other migrated React examples. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

nx-cloud · 2026-09-07T19:41:16Z

View your CI Pipeline Execution ↗ for commit aff8e72

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

☁️ Nx Cloud last updated this comment at 2026-09-07 19:41:36 UTC

pkg-pr-new · 2026-09-07T19:41:47Z

More templates

@tanstack/angular-virtual

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

@tanstack/lit-virtual

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

@tanstack/marko-virtual

npm i https://pkg.pr.new/@tanstack/marko-virtual@1192

@tanstack/react-virtual

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

@tanstack/solid-virtual

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

@tanstack/svelte-virtual

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

@tanstack/virtual-core

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

@tanstack/vue-virtual

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

commit: aff8e72

fix: replace ReactDOM.render with createRoot in React padding example

74d16c3

Merge branch 'main' into fix/replace-reactdom-render-with-createroot

eacfca9

piecyk and others added 2 commits September 7, 2026 21:38

chore: use namespace import for react-dom/client in padding example

aff8e72

Aligns the padding example with the other migrated React examples. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

piecyk merged commit 789f5c2 into TanStack:main Sep 7, 2026
9 of 10 checks passed

Navigation Menu

Uh oh!

Uh oh!

Replace ReactDOM.render with createRoot in React padding example - #1192

Replace ReactDOM.render with createRoot in React padding example#1192
piecyk merged 4 commits into
TanStack:mainfrom
nikhilsdabhade:fix/replace-reactdom-render-with-createroot

nikhilsdabhade commented Jun 10, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 10, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

❌ Failed checks (2 warnings)

Uh oh!

coderabbitai Bot commented Sep 7, 2026

Uh oh!

nx-cloud Bot commented Sep 7, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Sep 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

nikhilsdabhade commented Jun 10, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

❌ Failed checks (2 warnings)

Uh oh!

coderabbitai Bot commented Sep 7, 2026

Uh oh!

nx-cloud Bot commented Sep 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Sep 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nikhilsdabhade commented Jun 10, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 10, 2026 •

edited

Loading

nx-cloud Bot commented Sep 7, 2026 •

edited

Loading