Enable Suspense Features with Experimental Concurrent Mode using ReactDOM.createRoot
Concurrent Mode is a completely different rendering paradigm for React.
It changes something that has remained constant since the first version of React: ReactDOM.render.
To use Concurrent Mode, we use ReactDom.createRoot.
It's API is slightly different then the old faithful ReactDOM.render but, with this one change, we can access the future of React.
Instructor: [00:00] If you've been developing React apps for a long time, you are familiar with this old, faithful ReactDOM.render function. It's quite simple. It just takes a component and renders it to a root element somewhere. Most often, it's document.get element by id and some id. To take advantage of experimental concurrent mode, you have to change this.
[00:26] React's experimental build actually has three different modes that refer to as legacy mode, which is the mode we use today, blocking mode, which is an intermediate between these two major modes, and concurrent mode.
[00:41] Concurrent mode is what's required for pretty much everything that we are going to cover in this course. At this point, we have to have it enabled to actually see these features working.
[00:53] How do we do it? Well, using an experimental build of ReactDOM, we can change this to createRoot. Now, createRoot has a slightly different signature. We don't pass in both of these at once. We create a root from the root element and then to it we render our app.
[01:15] If I did everything correctly, our application should still render and work as it did before.
I noticed I don't get the loading message when I convert to React.createRoot(root).render(<App/>). Chan didn't explain what was happening. Would someone give more details please.