This changes everything… literally.

The way we render React apps to the DOM has remained the same since React’s debut in 2013.*

ReactDOM.render(<App />, DOMNode);

But that changes in React 18.

Remember what I said about gradual adoption? It allows us to render apps as if they are in React 17. The new root API is how we opt into React 18 features and performance improvements.

Using ReactDOM.render (now legacy root API), our app renders in a React 17 compatibility mode. Using the new root API, opts we unlock React 18’s new features and performance optimizations.

So what does it look like?

ReactDOM.createRoot(DOMNode).render(<App />);

The new root API splits root creation and mounting into two discrete steps. And we’ll talk about why after a quick review.

Tomorrow, you can expect a video covering everything we’ve learned as a step-by-step walkthrough.

🐦 chantastic

*I lied just a little bit. render() used to be called thru React until the ReactDOM package was extraced in 0.14.