docs(react-virtual): replace ReactDOM.render with createRoot in examples (#1192)

Author: nikhilsdabhade

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(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <App />
     </QueryClientProvider>
   </React.StrictMode>,
-  document.getElementById('root'),
 )

examples/react/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'
 
@@ -256,9 +256,8 @@ function GridVirtualizerDynamic({
   )
 }
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 )

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(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 )

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(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 )

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(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 )

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(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 )