00:00 Let's talk about frame rates. All right, so the the human eye can see things at about 60 frames a second now, what's a frame? We're going to look at this as an example if you're I think when I was a kid, we would like take a piece of paper or a stack of papers or like a

00:21 Set of these Post-it notes or whatever and we would draw on each little piece of paper Just a little character and then on each Successive piece of paper it moved just a little bit more and then you'd flip through them really quickly And it would be like a little movie and that's how movies work

00:39 it's there are individual frames for each image that you're looking at and when the movement between those images is Sensible then our it tricks our brains into thinking that it's actually moving what it it's really not As long as it's fast enough and it's smooth enough then our brains think that it is that's how moving pictures work so

01:00 The idea of our eyes being able to perceive things at around 60 frames per second means that as long as things are Moving in our field of view As long as the image that we're seeing on the screen is changing

01:15 Every 60 or 60 times a second then it will seem very smooth to us And so if we take that do a little bit of math That means that each frame needs to be 16 milliseconds long if they're any longer Then it'll start to look a little bit funny to our eyes

01:32 And so we need to make sure that we give the browser an opportunity To update the UI to update what the user is looking at every 16 milliseconds if we can't do it within that amount of time, then we end up with a janky UI that like You've definitely done this like you perform an interaction and then you scroll and it's like

01:52 This is just not a good experience at all. So that's the Our budget for the JavaScript that we're running is 16 milliseconds if we can't do our work within 16 milliseconds on the devices that our users are running our Applications on which could be lower-end devices then we're going to leave our users with a janky experience

02:14 So we need to make sure that We take no longer than these 16 milliseconds And if we take any longer than that, then we're toast our users are going to be in trouble or we're going to be in trouble and

02:28 sometimes like we end up taking way longer and that that leads to a super super janky experience basically dropping all these frames because the browser is only able to Paint the screen or update the screen based on our changes when our JavaScript is stopped. So if we take this long

02:47 Then the browser is going to try and catch up and it's going to say, okay Let's now that you're finally done I'll be able to do my work to update the screen and however long that's going to take typically it's going to be pretty quick But sometimes it could be a bit but yeah, most of the time it's going to be pretty quick

03:01 So it's our job to make sure that we do not take more than this amount of time So the browser gets its opportunity to update the UI before any frames are dropped. So that's the idea and The way that we can accomplish this first of all is just to not do so much in

03:19 The time amount of time that we have but sometimes you just can't help it. Sometimes you've got a UI That's just really really pretty complicated. And so you have to think about like making that Experience as fast as possible and luckily for us React has some utilities for us to

03:39 Make things faster. So here's an example of how react does this with concurrent rendering here? We have our app. We have some text some state that as the user is typing We're going to be re-rendering and then we've got this slow list

03:54 Let's say we've done everything we can to memoize this and optimize it as much as possible But for some reason something really slow has to happen here Maybe it's rendering many many items or maybe There are all sorts of reasons why this could be really slow and we've optimized it as much as we can We can't make it any faster

04:14 so what we can do is Instead of passing the text right here. We use this deferred text so we're using use deferred value, which we learned about in the react suspense workshop and what this does is it says Okay, great. I will render this component twice and you're thinking wait

04:32 I thought that it was slow if you render it once so how is rendering it twice gonna make it faster? Well, what happens is the initial render is going to happen no matter what so like when we land on this page It's going to take a moment to render stuff and that's why you want to make things as fast as possible

04:47 You don't want to reduce the unnecessary re-renders. You want to speed up the necessary ones and then maybe the unnecessary ones aren't a big deal So you're going to pay that cost but let's say we've optimized everything that we can and the user experience for this is really slow So I'm typing and we're not getting any really good feedback

05:07 So if you want to make it even faster what you can do is you say, okay react I want you to hang on to what we had before and I want you to try and render the new thing now and and Make sure that while you're trying to render that new thing that the browser gets a chance to update this

05:25 This state value so that as the user is typing they're seeing their updates and so it will render twice So that it renders once with the deferred text being the old thing so it can hang on to the old UI The the part of the UI that was slow and then the part of the UI that's fast can use the latest version

05:44 and so we can keep the input updated with the latest version of stuff and The slow stuff will be the old UI so we'll be able to display the old stuff that we had before Now that works And what it is doing in the background it says, okay, so I'll give you the old UI that's fine But in the background, I'm gonna render it a second time and this

06:06 Renders a special one where react says, okay. I'm rendering. I'm rendering. Oh, it's been too long Let me pause so the browser can do stuff and now I'll continue rendering and rendering and rendering. Oh, it's been too long Let me pause so the browser can do stuff and then I'll continue and so by doing things this way

06:21 We're able to really optimize the user experience. So even though we've made this as fast as we possibly can We can still give the user a non janky experience by making the the input text responsive but also by making it so that

06:38 the like the experience of actually rendering stuff and scrolling doing other things can also be responsive as other things on the screen or Updating because we're basically just putting this on like a lower priority for updating the screen

06:53 so we're going to be using use deferred value to improve this user experience allowing react to Optimize this a bit one thing. I want to make sure to call out is that based because of the way that this works react is going to be re-rendering our slow list with the same old deferred text that it did before and

07:15 To make that as fast as possible. We need to memoize this slow list so that when react is like, oh, okay Let me go get the old UI It's able to say oh this, you know text value is the same as it was before so I can just return the old thing We don't have to re-render the whole thing to get the old UI We'll just get the memoized version of the UI and so that will end up working

07:35 So it for this particular optimization you actually have to memo the component that you're passing the deferred value to But if you do that, then the UI should be really responsive the thing that I want to emphasize here is that

07:50 Use deferred value is I think that it's interesting that it is a suspense feature and allows us to do this concurrent rerent or rendering and It has a lot of application outside of just the performance aspects of this because it hooks into suspense and all that stuff, too

08:08 Which we talked a little bit about in the suspense workshop, I think that's enough talking so here we'll get into the specifics of this exercise and what I want you to be doing as far as like looking into The developer tools and stuff because the code changes aren't a lot and then we'll have you give this a whirl