00:00 One of the things that I love about React is the React hooks because it allows me to just have my function and all of the stuff for the logic of generating UI happens inside of that. However, sometimes there are things that you do in that function and that don't need to be done over and over again. But every time a state update

00:18 happens or the parent component re-renders or something, that entire function body needs to be evaluated again. That's just the way that JavaScript works. So if you have anything in there that doesn't actually need to be computed again, but is being computed anyway, then that can be a little wasteful. So we're talking about expensive calculations here.

00:37 Here, I have this simple function component distance where we're calculating the distance between two points, and we're going to assume that this is some expensive operation that's happening here to perform that calculation. This is where useMemo comes in really handy because if the distance re-renders

00:56 because its parent component re-renders something and it's not changing X and Y, the distance is going to be the same, then performing this calculation is unnecessary in that scenario. However, if you add a useMemo around this, then that prevents that calculation being called unnecessarily. It will now only be called if X and Y are changed.

01:15 So this is a nice optimization that we can leverage out of React. So useMemo is used to help us maintain object identity. So we can use those things and other dependency reasons and pass them to memoize components and stuff like that.

01:33 But it also is used to help us avoid calculating or computing something expensive again if there's no need to. So that is the second use case for useMemo, and we're going to be doing that in this exercise. Another thing that's really important for us

01:51 to understand as we're optimizing things for performance, is that the development version of our application is not as fast as the production version. There are a lot of optimizations that need to be made in all of that. And so I want you to spend a little bit of time

02:10 comparing the before and after of the build and before we actually run the build and running the dev server versus when we actually run the actual server. So if I run npm run build in the playground directory here, you're going to notice we're generating a bunch of different components

02:27 and or packages or modules. And right now our demo here is really suboptimal for a number of reasons that we're going to optimize. And so you can see we've got this big warning about this thing being like way too huge. It absolutely is too huge.

02:47 But still running the build is going to turn on production mode for React. And so it is going to make things a little faster. If we run npm run preview, then this will give us the production version of our app. So we can look at the development version, we can look at the production version,

03:05 compare how they differ when we pull up our profiler here. Let's, we don't want to be throttling here. Pull up the performance tab and see some of the differences in the way that this performs versus how the development environment performs.

03:23 They are going to be ever so slightly different and sometimes actually significantly different. And so while you're going through and measuring things, it's important for you to measure the actual production version just to see what does this actually run like in a production sort of build scenario.

03:43 And on top of that, it's useful also to throttle your CPU so it resembles more like a mobile device that some of your users are going to be using. And so running the production build and running your CPU at a throttled scenario,

03:59 you actually will notice issues with your performance that you wouldn't notice if you were just running everything in production or running things on your own machine. And if you're running it in development, it's going to look a lot worse than it actually is. And so these are a couple of things just to keep in mind

04:17 as you're working through performance issues that you have in your application is that you want to make sure that you're measuring the right things, that you're measuring it all, and that you're measuring in such a way that it resembles a real world user's actual experience in using your app.

04:37 All right, great. So I think that's enough for us to get going with this particular example. We're going to be going pretty deep into optimizing some expensive calculations. Use memo is just the first part of this. We're actually going to be moving things over into a web worker and all of that stuff that turns things into asynchronous stuff,

04:55 which is going to be pretty interesting. So we're going to be touching on suspense and things like that in here also. It's going to be pretty cool. I'm looking forward to getting into it with you. Let's go.