Welcome to A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's look at the useMemo Hook.

What is useMemo?

In our previous article on useCallback, we learnt the concept of memoization and how the useCallback Hook is used to memoized a callback function.

useMemo is very similar to useCallback. But instead of returning a memoized callback, it returns a memoized value.

The Hook takes in 2 arguments: a function and an array of dependencies. On every render, if there are no changes in the values of the dependencies, then useMemo returns the memoized value without re-executing the expensive function in the first argument.

Hence, this is a useful Hook for performance optimization as it avoids having to re-compute expensive functions on every render.

Initialization

First, import the Hook.

import React, { useMemo } from 'react';

Then, declared the memoized value by wrapping its expensive function inside the useMemo Hook, along with its dependencies.

const memoizedValue = useMemo(
   () => computeExpensiveValue(a, b), //1st arg: some function
   [a, b] //2nd arg: array of dependencies
);

And that's the basics of useMemo! Let's take a look at when it's best to use this Hook.

When To Use

Because this Hook is for performance optimization, you may be tempted to include it for every computational function or for every variable in your app. However, instead of increasing performance, too much use of useMemo can have adverse effects on performance.

According to React Docs, React may choose to “forget” some previously memoized values in order to free memory for off-screen components. After all, the useMemo helps to improve the speed of your app at the expense of memory usage. So including the Hook unnecessarily can result in both a slower app and with too much memory used.

The best way to use the Hook is for values that are computed by expensive functions that don't need to be executed on every render.

Also, it is good practice to write the function so that it still works without useMemo because the Hook only serves to optimize performance.

//Bad example of use: function written inside the Hook
const memoizedValue = useMemo(
   () => someArray.map(elem =>{
       //do something expensive here
       return elem
   }), 
   [someArray] //dependency
);

In the bad example above, the computational function is written inside the Hook and is inaccessible if the Hook is absent. Instead, create the function separately from the Hook so that it can be called even without the Hook.

//Good example of use
const memoizedValue = useMemo(
   () => myFunction(someArray), 
   [someArray] //dependency
); 

//function on its own
const myFunction = (arr) => {
   arr.map(elem =>{
       //do something expensive here
       return elem
   })
}

Conclusion

And that's the gist of this Hook! Thanks for reading this article. I hope it was helpful for React beginners.

Finally, this is the end of the basic React Hooks of this series! In the future of this series, we shall take a look at some awesome custom Hooks. For now, keep practising the basic Hooks and feel free to ask any questions while this series takes a short break.

Thanks for the wonderful support for this series and stay tuned! Cheers!

---

Resources

• reactjs.org/docs/hooks-reference.html#usememo