NOTE: In the latest version of React, "Concurrent Mode" is not a thing. Instead there are "Concurrent Features" that your components opt-into via the concurrent APIs which you will learn about in this workshop.

https://react.dev/blog/2022/03/29/react-v18#gradually-adopting-concurrent-features

Transcript

Kent C. Dodds: 0:00 I have a very simple app right here that's just rendering out "Hello, React World." I'm rendering that to this root element. I use ReactDOM.render. To use react concurrent mode, though, I need to use the new ReactDOM.createRoot API. This createRoot API accepts our root element.

0:19 I'm going to take that, and that's going to give me a root. Then, I use that root to render the UI that I want to have rendered. Here we go. I'll comment that out. We'll save this. Yeah, you can't even tell I'm refreshing. It works. That's all you need to do to enable concurrent mode.

0:38 This implies that you can only enable concurrent mode for the entire application starting at the root element where you're mounting your initial UI. You cannot opt into concurrent mode in different components through your application. It's pretty simple.

0:52 Before, we said ReactDOM.render. We pass the UI. Then, we pass the element. Now, we say ReactDOM.createRoot. We pass the element. Then call route.render to pass the UI.

1:04 There's also a root.unmount, which you can call if you want to unmount the UI from that root element, but we don't want to do that. I'm going to save that and bring it right back.