Leverage the React useMemo Hook for Expensive Operations
Certain calculations or operations can take a long time. React provides a useMemo hook that will return cached results from previous calculations, which can dramatically speed up render time.
Instructor: [00:01] Let's kick up a dev server for a function component TodoReactApp and check out its features. On the right, at first it seems everything is normal. We could add to-dos one, two, three. As our to-dos get longer, the gradient seems to fade darker and darker.
[00:17] This gradient is determined at runtime based on the length of the to-do, which really isn't too intensive, but we're going to treat it like code that could take a long time and see how we could boost its performance.
[00:29] If we look at dev tools, you'll see that for each item, it calls a function that determines the gradient. For each item, it also does the complex figuring of that gradient. Optimally, we'd like to not do the figuring part every time.
[00:44] Let's dig into the code and see what we could do. The TodoItem function component has the code in question. Inside the TodoItem component, on line 20, is where the console.log for the calling is. That is right before the getColors function is invoked.
[01:00] On line nine is where we start to dynamically determine what the gradient should be based on the length of the to-do. Again, this isn't rocket science, but it'd be nice to avoid recalculations if possible.
[01:13] To solve our problem, we'll introduce yet another React hook, called useMemo. To use this hook, we'll wrap our getColors inside another function and provide that to useMemo and pass a second argument describing the inputs we want to look at to determine if the return value should be recalculated.
[01:31] If the inputs haven't changed, then it'll return the answer from the previous calculation. In this case, we'll pass the to-do text and the theme, which are the values that are used to determine the colors.
[01:42] Now, if we go to run the app again, if we start to type, we'll only see a bunch of calling console.logs because the figuring part was already memoized on the initial render, before we cleared the console. Much nicer.
[01:55] To make things nicer still would be not to execute the TodoItem at all if it hasn't changed. We can import the Memo Higher Order Component and wrap our function to simulate what a pure component would do, comparing the previous and next props. Now, when we run our code, we'll only see a very few instances of calling or figuring, which is much better.