Performance Issue : ReactDom.render vs ReactDOM.createRoot

[Ndhlovu1]

trafficstars

The conventional technique for rendering a React component to a particular DOM element. The root of the app is ReactDOM.render. Consider this:

ReactDOM.render(<App />, document.getElementById('root'));

In this instance, the <App/> component is being rendered to the

element on the page.

createRoot : In order to render components in a new way with better performance and better support for concurrent mode, React 17 introduced a new method called createRoot. The fundamental operation of createRoot is similar to that of ReactDOM.render, except that it creates a new root container and returns a reference to it rather than rendering to a particular DOM node. Then, you can render your components to the root container using the returned reference. For instance:

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

In conclusion, the primary distinction between createRoot and ReactDOM.render is that createRoot generates a new root container for rendering components, whereas ReactDOM.render renders components directly to a given DOM element.