Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Enable Suspense Features with Experimental Concurrent Mode using ReactDOM.createRoot

    reactReact
    ^0.0.0-experimental-b53ea6ca0

    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.

    Code

    Code

    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    If I did everything correctly, our application should still render and work as it did before.