Using the memo Hook

In this section, we will learn about the memo Hook and where it is useful. We will then walk through an example in the PersonScore component we have been working on.

Understanding the memo Hook

The memo Hook creates a memoized value and is beneficial for values that have computationally expensive calculations. The Hook is called useMemo and the syntax is as follows:

const memoizedValue = useMemo(() => expensiveCalculation(), []);

A function that returns the value to memoize is passed into useMemo as the first argument. The function in this first argument should perform the expensive calculation.

The second argument passed to useMemo is an array of dependencies. So, if the expensiveCalculation function has dependencies a and b, the call will be as follows:

const memoizedValue = useMemo(
  () => expensiveCalculation(a, b),
  [a, b]
);

When any dependencies change, the function in the first argument is executed again to...