Understanding the Difference Between ReactDOM.render() and ReactDOM.createRoot().render() in React

Discover why `ReactDOM.render()` works in React v17 while `ReactDOM.createRoot().render()` requires React v18. Learn about the implications of these methods for your React applications.
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Why does ReactDOM.render() render anything but ReactDOM.createRoot().render() does not?

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Why Does ReactDOM.render() Work While ReactDOM.createRoot().render() Doesn't?

If you're new to React or just exploring the latest features, you might have stumbled upon a puzzling issue: why does ReactDOM.render() successfully render your components while ReactDOM.createRoot().render() does not? In this guide, we'll unravel this mystery and help you understand the differences between these two methods.

The Problem Defined

You've likely faced the following situation:

You're trying to render a simple JSX element (like an <h1> tag) using the ReactDOM.createRoot().render() method and nothing happens.

When you switch to ReactDOM.render(), it works perfectly fine.

For example:

[[See Video to Reveal this Text or Code Snippet]]

[[See Video to Reveal this Text or Code Snippet]]

Note: You are using React v17.0.2, and your root refers to a <div id="root"></div> in your HTML.

The Explanation

The key to understanding this issue lies in the version of React you are using:

ReactDOM.render(): This method has been the standard way to render React applications and has been available since earlier versions of React. It successfully mounts your React components to the DOM.

ReactDOM.createRoot(): This method was introduced in React v18. If you try to use it in React v17, you'll encounter the following error in your console:
TypeError: ReactDOM.createRoot is not a function

Why the Error Occurs

If you attempt to use createRoot() in React v17, your application fails to recognize this function because it simply doesn’t exist in that version. So what should you do? Here are your options:

Options for Rendering in React

Continue Using ReactDOM.render(): For projects that are still on React v17, simply stick with ReactDOM.render(). This will work for rendering your components without any issues.

Upgrade to React v18: If you want to leverage the new features, including the createRoot() method, consider upgrading your React project to version 18. After the upgrade, your code will look like this:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

In summary, the difference between ReactDOM.render() and ReactDOM.createRoot().render() primarily relates to the React version you are using. By using ReactDOM.render() in React v17, you’re on solid ground, while opting for createRoot() requires you to be on React v18 or higher. Keep these details in mind as you develop or upgrade your React applications to ensure smooth rendering and optimal performance.

Remember: when in doubt, check the version of React you’re using and refer to the official documentation for the best practices related to rendering components.