When React loads a component, it not only renders the JSX code but also evaluates all of the code and functions inside the component. Some components require functions that take a long time to execute, including API calls on a slow network or large database queries. If this occurs every time the component is rendered, and if the component re-renders frequently, the overall performance of the application will be compromised.

Often, the data returned by calls to APIs don’t change between component re-renders. It would be nice if we could instruct React to only call these expensive functions when new data is needed, and have it return a cached result when the data is the same. Luckily, React provides a hook that can help us optimize expensive function calls, named useMemo().

useMemo() utilizes an optimization technique called memoization. This technique caches the result of a function call and only calls the function again when its dependencies change.

React’s useMemo() hook takes two arguments. The first argument is a function and the second is an array of dependencies. If any of the dependencies change, React will recompute the result of the function. Its syntax looks like this:

import { useMemo } from 'react';

function DatabaseQuerier({ query }) {

  const queryResult = useMemo(() => {
    return  expensiveDatabaseQuery(query)
  }, [query]);
  // ...
}

In this example, the DatabaseQuerier component uses the time consuming expensiveDatabaseQuery() function. However, thanks to useMemo(), the queryResult returned will only be recomputed if the query dependency changes.

There are some notable behaviors of useMemo(): The function passed to useMemo() will be called when the component mounts, so it will always be called at least once. The dependency list works just like useEffect()‘s dependency list: If the list is empty, then it will only run on the first rendering of the component. We often want to pass in a dependency list that matches the arguments of the expensive function executed within the useMemo() callback. This ensures that any changes to the input of the function will give us an updated output. The dependency list is not passed as arguments to the function, but in most cases, the dependency list should be the same as the arguments passed to the function.

Note: The coding exercises in this lesson will be completed off-platform. If you have not done so yet, check out our article on Setting up Visual Studio Code before getting started.