 Hey there, welcome to react holiday day 13 So excited today, we're going to talk about something that is a little bit different but very important and we're going to talk about concurrent mode and we're It's kind of hard for me to explain what exactly concurrent mode is But it's a slightly different way of rendering what you've given react now unless you have a Just mega-performant react app already You might not be able to see some of the the differences right away But it is helpful to know kind of what some of those core differences are as they apply to suspense Which is what we're learning about now. So I did want to cover it and Just give you an opportunity to see what it will do for us This is not going to be just kind of one video on this some probably be at least two Maybe three or four So we're just going to try to tackle this one piece at a time And let's dive in So first of all it is today today is day 13. So we'll change that up now When we hit refresh on this we can see just for a split second the looking for Pokemon, right? Now I would like to make that a little bit longer so that we can see the difference that Concurrent mode is going to give us so I'm going to add a dependency This is not something that you'll regularly want to add to your app. It's just something for Demonstration purposes, but it's called sleep promise Now we're going to use sleep promise to Make our resources load slower Again, this is just so we can see what's happening and see the difference that concurrent mode is going to make in suspense So we're going to import a sleep from sleep promise and After that we will call Add it into our chain another then Sleep and we'll see how 500 feels We might have to reload this Okay, 500 still feels a little fast Let's make it 750 Okay, that that seems decent enough for us to kind of get a sense of what's happening So we're waiting now 750 milliseconds at least for this promise to fully resolve and for the app to render the list That is good for our purposes Now what I want to talk about next is Right here. So at the very root of our application, we're rendering using the react dom render method and This is our old faithful friend. We've been using this for a very long time I think it changed a little bit around version 13 or 14 maybe and you know moving into react dom versus just on react and It will likely change again. So We will be using in this To opt into concurrent mode. This is the regular mode that it's always been the default mode or sync mode or whatever it ends up being called But we can opt into concurrent mode Like so we'll use react dom create root And here is where we will put our elements So we'll delete that from there We'll say create root and then we'll call render on that with the application slightly different I'm instead of just calling render and giving both arguments. We're going to call create root to set up our root which is just this and Then we'll call render on that and give it the component Here, okay. That's just because I was changing things. So let's refresh that and it should go away Cool now you might notice a slight difference. So let me render that again Sticks wait for a lot longer and Then it renders the whole thing. So we don't see the loading state at all, which is fascinating. So let me Let's test that out. Let's see. We can make it last even longer. This will be up to almost four seconds and see what happens So now we're waiting a really long time But when the page loads all of that data is already there We don't see the locating Pokemon or loading Pokemon or whatever it is Now that we're in concurrent mode This suspense component actually gains some capabilities, which is really interesting By default now it is not going to render anything until That stuff that all this data is resolved that resource has resolved We have a new prop though in concurrent mode on the suspense component that we can use to Basically opt out of that default behavior waiting for the data So that is called max duration An interesting thing about max duration in default mode or sync mode is that effectively it defaults to zero So if we want the behavior that we had before we can just put max duration zero And there you see for 750 milliseconds We see that loading Pokemon we see the rest of this document loading Pokemon and tell the list comes in and then it fills in But we don't have to stick with zero So if we wanted to we could put this up to if we put this up this threshold of max duration past a second Then it would wait one second Before before rendering of showing the page in which case that 750 milliseconds that we're delaying has already passed and We will never see that spinner. So where does this come into play? When we had it at zero or When we had it in default mode there was a split second where we were showing loading Pokemon and it might be hard to see on YouTube but Even when we didn't have this sleep in here Just the latency of making that request takes a split second and you see that loader now That's not an ideal experience, especially since It might take 300 milliseconds for a user to even interpret that they're waiting for anything to load. So We can put this at like 250 milliseconds and you can see the data comes back quickly But it's not under our it comes back faster than our threshold So we don't see the loading We just see Pokemon come in because it's faster than our threshold So that is what you get with concurrent mode You get this additional prop that you can use on suspense. I'm called max duration Which allows you to control in a very fine-grained way How the user experiences loading states and this is really the magic that the react team has been building up to in the fiber architecture in async concurrent rendering mode and Suspense so this is a really powerful thing Tomorrow we'll see how we can even split things so that we can have fine-grained control over every request But today I'm explore that it's a pretty simple transformation for the most part basically you just have to change this up a little bit to use create root and render on that and Use suspense to play around with that and again if you want you can use the sleep promise package to Give you a few extra milliseconds to actually see what changes are taking place I hope that's helpful. This is very exciting as a UI developer. I'm just ecstatic about this I think this is gonna really improve the experiences that we ship to users and I think it will for you, too So have fun hit me up with any questions and I'll see you tomorrow