From 74d16c3f0332d3633b0e455eaebeab2e350df9db Mon Sep 17 00:00:00 2001 From: Nikhil Dabhade Date: Thu, 11 Jun 2026 00:37:49 +0530 Subject: [PATCH 1/3] fix: replace ReactDOM.render with createRoot in React padding example --- examples/react/padding/src/main.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/react/padding/src/main.tsx b/examples/react/padding/src/main.tsx index c3291baae..24fb4bdad 100644 --- a/examples/react/padding/src/main.tsx +++ b/examples/react/padding/src/main.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ReactDOM from 'react-dom' +import ReactDOM from 'react-dom/client' import './index.css' @@ -256,9 +256,9 @@ function GridVirtualizerDynamic({ ) } -ReactDOM.render( +const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) +root.render( , - document.getElementById('root'), ) From 5d622ad090c59ef93f15e934dadbfd740c8dc445 Mon Sep 17 00:00:00 2001 From: Damian Pieczynski Date: Mon, 7 Sep 2026 21:38:52 +0200 Subject: [PATCH 2/3] fix: replace ReactDOM.render with createRoot in remaining React examples 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 --- examples/react/infinite-scroll/src/main.tsx | 5 ++--- examples/react/scroll-padding/src/main.tsx | 5 ++--- examples/react/smooth-scroll/src/main.tsx | 5 ++--- examples/react/sticky/src/main.tsx | 5 ++--- examples/react/variable/src/main.tsx | 5 ++--- 5 files changed, 10 insertions(+), 15 deletions(-) diff --git a/examples/react/infinite-scroll/src/main.tsx b/examples/react/infinite-scroll/src/main.tsx index 508870093..323fac2b3 100644 --- a/examples/react/infinite-scroll/src/main.tsx +++ b/examples/react/infinite-scroll/src/main.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ReactDOM from 'react-dom' +import * as ReactDOM from 'react-dom/client' import { QueryClient, QueryClientProvider, @@ -153,11 +153,10 @@ function App() { ) } -ReactDOM.render( +ReactDOM.createRoot(document.getElementById('root')!).render( , - document.getElementById('root'), ) diff --git a/examples/react/scroll-padding/src/main.tsx b/examples/react/scroll-padding/src/main.tsx index b430aeae8..aca78c290 100644 --- a/examples/react/scroll-padding/src/main.tsx +++ b/examples/react/scroll-padding/src/main.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ReactDOM from 'react-dom' +import * as ReactDOM from 'react-dom/client' import './index.css' @@ -98,9 +98,8 @@ function App() { ) } -ReactDOM.render( +ReactDOM.createRoot(document.getElementById('root')!).render( , - document.getElementById('root'), ) diff --git a/examples/react/smooth-scroll/src/main.tsx b/examples/react/smooth-scroll/src/main.tsx index e87f019c3..91acf85b7 100644 --- a/examples/react/smooth-scroll/src/main.tsx +++ b/examples/react/smooth-scroll/src/main.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ReactDOM from 'react-dom' +import * as ReactDOM from 'react-dom/client' import './index.css' @@ -115,9 +115,8 @@ function App() { ) } -ReactDOM.render( +ReactDOM.createRoot(document.getElementById('root')!).render( , - document.getElementById('root'), ) diff --git a/examples/react/sticky/src/main.tsx b/examples/react/sticky/src/main.tsx index 132e8af4e..393072180 100644 --- a/examples/react/sticky/src/main.tsx +++ b/examples/react/sticky/src/main.tsx @@ -1,6 +1,6 @@ import './index.css' import * as React from 'react' -import ReactDOM from 'react-dom' +import * as ReactDOM from 'react-dom/client' import { faker } from '@faker-js/faker' import { findIndex, groupBy } from 'lodash' import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual' @@ -115,9 +115,8 @@ const App = () => { ) } -ReactDOM.render( +ReactDOM.createRoot(document.getElementById('root')!).render( , - document.getElementById('root'), ) diff --git a/examples/react/variable/src/main.tsx b/examples/react/variable/src/main.tsx index 51878a21f..3ee0607b3 100644 --- a/examples/react/variable/src/main.tsx +++ b/examples/react/variable/src/main.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ReactDOM from 'react-dom' +import * as ReactDOM from 'react-dom/client' import './index.css' @@ -342,9 +342,8 @@ function MasonryHorizontalVirtualizerVariable({ ) } -ReactDOM.render( +ReactDOM.createRoot(document.getElementById('root')!).render( , - document.getElementById('root'), ) From aff8e722a939e56be900cec2cc1c5ee9d6a11d2e Mon Sep 17 00:00:00 2001 From: Damian Pieczynski Date: Mon, 7 Sep 2026 21:39:29 +0200 Subject: [PATCH 3/3] chore: use namespace import for react-dom/client in padding example Aligns the padding example with the other migrated React examples. Co-Authored-By: Claude Fable 5.1 --- examples/react/padding/src/main.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/examples/react/padding/src/main.tsx b/examples/react/padding/src/main.tsx index 24fb4bdad..4083ecaf9 100644 --- a/examples/react/padding/src/main.tsx +++ b/examples/react/padding/src/main.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ReactDOM from 'react-dom/client' +import * as ReactDOM from 'react-dom/client' import './index.css' @@ -256,8 +256,7 @@ function GridVirtualizerDynamic({ ) } -const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) -root.render( +ReactDOM.createRoot(document.getElementById('root')!).render( ,