Rendering JSX Elements in React

React doesn’t directly render JSX elements to the browser. Instead, it relies on the react-dom package, which provides methods to interact with the browser’s DOM. It serves as the bridge between React’s virtual DOM and the actual browser DOM.

The createRoot API

In React 18 and later, react-dom handles rendering these components into the DOM and updating them efficiently using an API called createRoot. It connects the React application to the browser's DOM and is responsible for displaying our UI. This new API offers better performance and enables concurrent rendering, making React applications more efficient and responsive.

React introduced the createRoot API in React 18 as part of its updates to the React rendering engine. It replaces the older ReactDOM.render method to provide better performance and support for new features like concurrent rendering.

How createRoot works

The createRoot method is used to create a React root container for rendering. Once the root container ...