Replace Legacy Root API with New Root API
For the better portion of a decade, React has shipped with the render root API. This changes with React 18 — mostly. React 18 is a transitional release, supporting render (legacy root API) and createRoot (new root API). React 18's legacy root API operates exactly the same as v17.
Instructor: [0:01] ReactDOM 18 ships with two root APIs -- the one that we're familiar with, ReactDOM.render, and also a new one, ReactDOM.createRoot. As of React 18, these are referred to the legacy root API and the new root API.
[0:19] When we use the legacy root API, we get a warning saying that everything that we render will be rendered as if it is in React 17. Nothing has changed. If we want to utilize the performance improvements of React 18, as well as the new concurrent features, we need to use createRoot, the new root API. How do we do that?
[0:41] Things change just a little bit. We're still going to keep this render() method, but we're only going to render the component tree. This gets put into createRoot. Format, Save, and Refresh in our browser. Now that we're using the new root API in React and ReactDOM 18, that warning goes away. With this one change, we've been able to update our app to opt into all of the new performance enhancements in React and ReactDOM 18.