Deprecation notice: ReactDOM.render is no longer supported in React 18

If you are a React developer, you might have come across the deprecation notice for ReactDOM.render in React 18. This change has been introduced to improve performance and simplify the React API. In this blog post, we will discuss the deprecation of ReactDOM.render and explore the alternatives you can use in React 18.

What is ReactDOM.render?

ReactDOM.render is a method in React that is used to render a React element into the DOM. It takes two arguments: the React element to be rendered and the DOM element where it should be rendered. Here’s an example of how ReactDOM.render is typically used:

const element = 
Hello, world!
;
ReactDOM.render(element, document.getElementById('root'));

This code snippet renders the “Hello, world!” element into the DOM element with the id “root”. However, in React 18, ReactDOM.render is deprecated and no longer supported.

The alternative: ReactDOM.createRoot

In React 18, the recommended alternative to ReactDOM.render is ReactDOM.createRoot. This new method provides a more flexible and efficient way to render React elements into the DOM. Here’s how you can use ReactDOM.createRoot:

const root = document.getElementById('root');
const element = 
Hello, world!
;
const rootElement = ReactDOM.createRoot(root);
rootElement.render(element);

With ReactDOM.createRoot, you first need to get the DOM element where you want to render your React element. Then, you create a root element using ReactDOM.createRoot and pass in the DOM element. Finally, you call the render method on the root element and pass in your React element.

The alternative: ReactDOM.hydrate

If you are using server-side rendering (SSR) in your React application, another alternative to ReactDOM.render is ReactDOM.hydrate. ReactDOM.hydrate is used to hydrate a server-rendered HTML to make it interactive. Here’s an example:

const root = document.getElementById('root');
const element = 
Hello, world!
;
ReactDOM.hydrate(element, root);

Similar to ReactDOM.createRoot, you first get the DOM element and create a root element using ReactDOM.hydrate. Then, you call the hydrate method and pass in your React element and the DOM element.

Conclusion

In React 18, ReactDOM.render is deprecated and no longer supported. Instead, you can use ReactDOM.createRoot or ReactDOM.hydrate as alternatives. ReactDOM.createRoot provides a more flexible and efficient way to render React elements into the DOM, while ReactDOM.hydrate is used for server-side rendering. Make sure to update your code accordingly to ensure compatibility with React 18.

That’s it for this blog post! We hope you found this information helpful in understanding the deprecation of ReactDOM.render in React 18. If you have any questions or need further assistance, feel free to leave a comment below.