Memoized Values with React useMemo
useMemo is a handy hook that we can use to avoid unnecessary computations of expensive functions. useMemo will only recompute the memorized value returned from the first parameter (called the create function) when a dependency in the second parameter array changes. Thus saving our app from re-computing a function each time our component re-renders.
Instructor: [0:01] As you can see here, I have put together just a dummy analytical Dashboard. It's got Reviews and Products. All that stuff is inside of this dashboard file here. Further down, inside of this file, is the Home component. I also have a array of static data for those products -- shirts, shorts, watches, bracelets, that kind of stuff.
[0:22] Let's say for this video, I want to find the top product as it corresponds to its progress of inventory. I want to say, const topProduct, and then I'm going to sort that data by its progress. Then, I'm going to index off the first one. It's going to bring me the first product with the highest progress, which is that last value in the createData function there.
[0:50] Further down, let's display this information to our users. We'll do it with just a simple P tag, and say, "This is the top product," and display its name. Back on our app, you can see that we have the sorts. It has the highest inventory progress there.
[1:06] That's the one that gets displayed up here at the top. This is great and all, but something to keep in mind is every time the Home component rerenders, we're going to rerun this sorting function. This isn't going to be too bad because we're working with a really small data set instead of our data array.
[1:26] As you can imagine, with applications that work with a lot of data, especially if you're not getting the data in the way that you need it to get and you need to do some reduce or some additional looping or even if it's nested.
[1:38] This could grow really fast and doing this computation every time our Home component rerenders is not ideal. What we would rather like to do is turn this into a function and only rerender it one time. I'm going to do React.usememo.
[1:56] Give it an optional second param of an empty array. Empty array means that I only want this function to run one time when it mounts. Because our data is static, it's fine for me to just do this the one time.
[2:11] If you're working with something that has dependencies inside of this function, then you would want to put those dependencies inside of that second array parameter there. To recap this, the useMemo hook is a way to memoize values.
[2:27] This first param is a create function that does something for your app. The second param is an array of dependencies. UseMemo will only recompute the memoized value when one of the dependencies that we pass to it here has changed. Since I've got nothing in here, it's only going to do it one time. This is going to help with expensive calculations on every render.