00:00 So we've got ourselves a performance problem. If you type in this input, you'll notice it right away. It is not fast at all. And yeah, super bad user experience. So what's going on is something that you're going to have to kind of figure out. Actually, we have Kelly, the co-worker, who threw in something that makes it slow.

00:18 But this definitely happens. You definitely end up with a janky user experience sometimes. So what I want you to do is pull up the Performance tab in your Developer Tools. Make sure that you throttle the CPU to 6x slowdown so that this is even more obvious what the problem is.

00:36 And also, it simulates a user on a low-end device. Most users aren't using a laptop that has lots of power necessarily. So we're going to record. And then I'll type in dog. And then I'll hit Backspace. And then we'll stop.

00:55 And all of this right here, you see the red right there and right here when we're performing our interactions. That red is an indication that there is a problem. You notice a little bit of red at the beginning here. I don't know how to get that to go away. It happens every time you hit Record. It starts out with a little bit of red. And I don't know what it's doing.

01:14 But yeah, we don't need to worry about that. So yeah, you'll notice a bunch of interesting things in here. You can feel free to dive into all of this stuff. The thing that I think will be most useful for you to know is that scrolling in this view is actually just going to narrow the view. If you want to scroll down, because there's some space

01:33 below, then you hold down the Shift key. And then you can scroll down. You can also click and drag around as well if you want to do that. But yeah, I find that just using my track pad with using the Shift key, you can also scroll side to side like this. But I find that to be pretty useful.

01:52 So yeah, we're going to have a bit of fun with this, because the end result of this is going to look completely different once you've added useDeferredValue and memoized the card component. You can also, if you'd like, take a look at the profiler for React specifically.

02:09 But this Performance DevTool is going to be the thing that we're going to notice the biggest impact on our performance. Especially when we delete the dog, this will be pretty interesting right here as well. So this will look very different once you added useDeferredValue. And it's thanks to React's concurrent rendering and how it can say, OK, I'm doing some work.

02:29 OK, I'm going to stop and let the browser do its thing. OK, now I'm going to do some more work. And I'm going to stop and let the browser do its thing. And that all comes from using useDeferredValue. OK, let's get into it.