DEV Community

Luigi Morel
Luigi Morel

Posted on

ReactDOM.render is no longer supported in React 18

So, I bootstrapped my first React application since the launch of React 18 (6 days after the launch).

When I checked my console, I was seeing an error that I did not expect to find (at least according to me):
An image showing the error from my console window

Why the error occurs?

The error above is shown when you use React.render() instead of React.createRoot in React v18 to render the root of the application - which is always the div with an id of root in the index.js or index.tsx file; depending on whether you bootstrapped your application to use types (Typescript) or not.
An image of the index.tsx file in my application

How to fix.

Write the following code in your index.tsx or index.js file

  1. Import ReactDOM from the react-dom/client sub-module
Import ReactDOM from 'react-dom/client'
Enter fullscreen mode Exit fullscreen mode
  1. Change the structure of your index.js or index.tsx file. However, this will depend on whether your using Typescript or not.
  • Using Typescript
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import reportWebVitals from './reportWebVitals'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>
)

reportWebVitals()
Enter fullscreen mode Exit fullscreen mode

Look closely and you'll see a createRoot somewhere. Had you seen it? 😏 Pay attention next time :)
The React team changes to createRoot so as to support
Concurrent Mode in React apps.

Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed.

Read more about concurrent mode

  • Using plain Javascript
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import reportWebVitals from './reportWebVitals'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>
)

reportWebVitals()
Enter fullscreen mode Exit fullscreen mode

Additional information.

  • Using React Router in React 18 This is how you would set up your index.js or index.tsx file if you're using the new file set up.
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
 <React.StrictMode>
  <BrowserRouter>
   <App />
  </BrowserRouter>
 </React.StrictMode>
)

reportWebVitals()
Enter fullscreen mode Exit fullscreen mode

I hope I helped you in a way I could.

Cheers.

PS: This is the first article I've ever written. To growth πŸŽ‰

Top comments (1)

Collapse
 
fredrickmakori profile image
Fredrickmakori

well, explained