Transcript
00:00 All right, we've got an issue with this app. If I choose one of these options and then I record a performance profile, I hit force re-render and I say stop, then you notice it actually doesn't look all that bad, but that's because I didn't throttle. So if we're on a slow device,
00:19 then things are gonna be a little bit more noticeable. You'll also notice that I'm actually moving my mouse around to avoid highlighting this because that'll just add additional noise to our experience here. So we're gonna do this again with a 6x slowdown on our CPU. So here, move around the UI
00:36 and just click on force re-render and now stop. So that just updated some state to trigger a re-render of our UI. And you'll notice right here, we got some red going on right there just because we clicked and we just re-rendered. If you pull up the profiler here, then we also have a re-render
00:55 or the reason we're having that problem is because our app is re-rendering even though there's actually no UI that's changing. Now, whether or not there's UI changing, the fact that we have such a really slow experience right here is concerning. And so we want to address that.
01:15 If you dive into this a little bit, you'll notice this search city. So I want you to play around in here and see if you can figure out, okay, where is this slow and why is it so slow? It may not be obvious right from the get-go. You might just say, oh, well, it's because this function is slow. Well, no, there's a little bit more to it. Why is that function so slow?
01:33 Is the function itself slow or maybe there's some other explanation? So I want you to play around with this a little bit. The actual solution to this specific scenario is pretty simple. You add a use memo, but I want you to explore the performance tab a little bit to get an understanding for why is this particular thing kind of slow?
01:53 So play around with this a little bit. We'll see you when you're done.