00:00 So, let's come down here first and we'll memoize the card. So, card equals memo version of this card function. Now, there's our slow thing, the thing that's making it slow. Okay, memo is going to come from React. Now, with that, that's going to improve some things, but yeah, not everything.

00:19 If we type in dog in here, it's still like I type in dog, that seems to be pretty fast. That actually was awesome. But if I hit backspace to delete it all, yeah, that is not fast. And that's because we need to recreate all of these cards. Now that we've removed all the cards and now we hit backspace, we need to add a bunch of new cards.

00:37 So, we're going to do an initial render of all of those and that's going to make things slow. So, we're going to add a deferred query using use deferred value. So, let's see if we can do that. Const deferred query is use deferred value from React with the query. And then we're going to pass the deferred query

00:57 to retrieve our matching posts. So, that way, React will render this twice. It'll render it once with the old query and once with the new query and it will be able to display the old stuff much quicker. So, let's take a look at that. And we'll hit this.

01:18 We'll type in dog and then backspace the dog. That felt way faster, way, way, way faster. And let's see how this impacts things. So, what's interesting is I was, I'm pretty sure I was on a throttled situation here, but this is still like really fast. That's kind of interesting that that was so fast. Oh, you know what?

01:37 I know why. That's because we memoized it. So, this was faster because it was memoized. And so, the cards that already existed were re-rendered with the same post that they had before. And so, it was just as fast. No problem there. Okay, that explains that. So, why was this faster? Well, we do still have that little red dot right there.

01:57 And I don't want you to worry too much about that because, well, for a couple of reasons. We're actually still running the development version of React, which is going to be slower, period. And then we're also running on a 6x slowdown, which is pretty generous as far as us making sure

02:16 that we're covering all of our bases. So, I do see that red little sliver right there. That could also just be some unlucky timing or something on the way that some of this worked out. So, don't worry too much about that. The thing I want you to notice, though, is how this is all chopped up. If you remember before,

02:34 this was all just one straight line across. But this is all chopped up by React because it's just every, after it finishes doing a task, it's gonna say, hey, I finished doing my thing. Does anybody need to do anything? Oh, man, it's been, like, too long. See, we're performing work until deadline. The deadline is now. And so, we're gonna stop

02:54 and we'll let the browser do its thing. And the browser is doing its thing right in these little gaps here. And then once the browser is done, then it'll call back into me and then I'll continue. And so, by chunking our work up like this, sure, the browser's still working hard and everything. Like, we still gotta do the work,

03:12 but we don't have to do it all at once. So, we can let the browser update and keep things responsive, which is so cool. Part of what makes this work is because each one of these pieces of work is calling one of these card components. So, let's say that I made this slow thing.

03:31 Actually, let's put this while loop inside of a single card. Or here, we'll put it right in our matching posts. And we're gonna make it take five seconds. This is gonna be a disaster. Even if I wasn't on an emulated slow situation,

03:52 every keystroke that I do is gonna wait for five seconds. So, yeah, like no amount of deferred nonsense or concurrent rendering is gonna solve this problem. But if the problem that you're facing, man, it's taking forever to update. The problem, if the problem you're facing

04:12 is spread across many components, like a death by a thousand cuts situation, then use deferred values intended to solve that specific problem. And it turns out that a lot of problems are that specific problem. So, yeah, definitely don't do this while loop

04:31 to lock up the thread. That's not a good thing. Also, probably don't do this either. But this is really just to simulate what actually does happen in real applications, which is many, many components causing, not a single one of them is the problem, but each one of them causing just enough that it slows your application down,

04:50 especially on low-end devices. And so now, by using use deferred value and using that as our mechanism for rendering all of those components, we can at least chunk up the work in such a way that we peak our head up, let the browser do its thing, and then we go back down to do more digging

05:07 for the gold or whatever, and chunking in this way. You should definitely get comfortable with this performance tab. We're gonna be exploring it a little bit more in other exercises, but yeah, lots of interesting things can be found in here. So play around in here, and yeah, well done on this exercise.