Home Why does ReactDOM.render() render anything but ReactDOM.createRoot().render() does not?

Questions

Why does ReactDOM.render() render anything but ReactDOM.createRoot().render() does not?

May 17, 2022

I am trying to use JSX in React but ReactDOM.createRoot().render() won’t render anything:

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.createRoot(root).render(<h1>Hello world</h1>)

But when i use ReactDOM.render it works:

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<h1>Hello world</h1>, root)

It is not like I have a problem with this, but I am more interested why it is this way.

Note: I am using React v17.0.2 and root refers to <div id="root"></div>.

>Solution :

ReactDOM.createRoot wasn’t added until v18. If you look in the devtools console, you should see this error:

TypeError: ReactDOM.createRoot is not a function

Here’s a v17 example showing the error:

const root = document.getElementById("root");
ReactDOM.createRoot(root).render(<h1>Hello world</h1>);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

And a v18 example that works using createRoot:

const root = document.getElementById("root");
ReactDOM.createRoot(root).render(<h1>Hello world</h1>);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

For v17, use ReactDOM.render. (Or upgrade to v18 and use createRoot.)