As React functional components grow larger in size and involve more complexity, re-renders become less efficient and may adversely impact the application's performance. The worst the application's performance, the greater the likelihood of users being frustrated with slow and unresponsive pages. If you choose to ignore this declining performance, then users may forever leave your application for alternatives that offer better performance. React provides two built-in hooks for memoizing expensive computations: 

Learning the differences between the two hooks and knowing when to use them ensures that you understand the trade-offs associated with these hooks and don't prematurely optimize your application. 

, we avoid re-calculating values by caching previously calculated values. For example, given a simple 

 function that calculates the product of an input number and two:

 function five times with the same argument 

double(10); // 20
double(10); // 20
double(10); // 20
double(10); // 20
double(10); // 20

Each function call performs the exact same multiplication calculation of 

. Calculating the product between two numbers can be considered a simple operation that requires little time to output a result, so caching would not be suitable in this case. However, for functions with long execution times, such as retrieving a list of suggestions based on user input (typeahead) via an API endpoint, caching could lead to significant performance gains. 

For example, if the user visits YouTube looking for videos related to JavaScript and types "JavaScript" into a search typeahead, then the typeahead will display suggestions for the inputted query "JavaScript." If the user decides to narrow down the search to videos related to JavaScript closures and adds "Closures," then the typeahead will display suggestions for the newly inputted query "JavaScript Closures." What if the user changes their mind again and wants videos only related to JavaScript? If the user deletes "Closures" within the typeahead, then the typeahead will once again display suggestions for the inputted query "JavaScript." If we cached the suggestions retrieved from the first time the user entered "JavaScript," then we avoid repeating an API call that would return results previously fetched.

To memoize a function, define a function 

const memoDouble = memoize(double); // Initializes the memoization cache and decorates the `double` function to leverage this cache.

memoDouble(10); // Searches the cache for a key of 10. Since the cache is empty, the function doubles 10. Before returning the result, 20, it is stored into the cache. This value can be referenced by the input value 10. 
memoDouble(10); // Returns 20 from the cache.
memoDouble(10); // Returns 20 from the cache. 
memoDouble(10); // Returns 20 from the cache.
memoDouble(10); // Returns 20 from the cache.

Each time a function is memoized, a new cache is created for that particular function. In the above example, instead of calculating the product of 

 five separate times, the product is calculated only once, on the first function call. The benefits of memoization are more apparent for functions that require more time to finish execution.

saving execution time in exchange for greater memory consumption

, which always evaluates the same result when given the same argument/s (deterministic) and causes zero side-effects. For an 

, whether you should memoize it or not depends on its implementation. For example, with the typeahead example, because suggestions don't change frequently and users don't necessarily need the most recently updated suggestions with few to zero suggestions changed, the function for fetching these suggestions can be memoized. There are additional limitations to the above implementation of the 

 function, such as eventually running out of memory (and needing to implement a cache invalidation strategy) and memoizing based on multiple arguments rather than a single argument, but those topics are outside of the scope of this tutorial.

 hook is important, let's walkthrough a simple example with a component that renders a list of numbers. Anytime an "Add Item" button is clicked, a new number is added to the list.

import { useState } from "react";
import List from "./components/List";

export default function App() {
  const [numbers, setNumbers] = useState([0]);

  const handleOnClick = (_evt) => {
    setNumbers((current) => current.concat(current[current.length - 1] + 1));
  };

  return (
    <>
      <List items={numbers} />
      <button type="button" onClick={handleOnClick}>
        Add Item
      </button>
    </>
  );
}

Initially, the list starts with only one number, zero.

If you press the "Add Item" button, then the number one is added to the end of the list. The number added to the list by the "Add Item" button is one more than the last number in the list.

If you press the "Add Item" button again, then the number two is added to the end of the list.

Each time a number is added to the list, the 

 state variable is updated with a newly concatenated number, and React re-renders the components affected by this update along with those components' children: the 

 component (where the state change occurred) and the 

 component (where a prop changed as a result of the state change).

Anytime it re-renders a component, React recreates the functions defined within the body of the functional component as brand-new function objects. 

To track whether the component recreates the functions defined within it during subsequent re-renders:

If we restart the example application and open the developer tools, then you will notice only one function is within the set.

If you press the "Add Item" button, then another function is added to the set.

 function anytime React re-renders it even though nothing about 

 component only creates one instance of this function and memoizes it. Upon subsequent re-renders, the 

 component does not recreate this function since it is already memoized.

import { useCallback } from "react"; // Import `useCallback` from `react`. 

const functionStore = new Set();

const List = ({ items }) => {
  const handleOnClick = useCallback((evt) => {
    console.log(evt.target.innerHTML);
  }, []);

  functionStore.add(handleOnClick);

  console.log(functionStore);

  return (
    <ul>
      {items.map((item) => (
        <li key={item} onClick={handleOnClick}>
          {item}
        </li>
      ))}
    </ul>
  );
};

export default List;

Now, if you press the "Add Item" button multiple times, only one function will be stored within the set.

Currently, in the above example, the dependency array is empty. Therefore, this function remains the same across all subsequent re-renders.

 as a dependency, then each time we press the "Add Item" button, a new function is stored within the set. For each re-render, 

// ...

const handleOnClick = useCallback((evt) => {
  console.log(evt.target.innerHTML);
}, [items]);

// ...

In practice, dependencies should be specified only if the function references the dependency during execution. Suppose we adjust the 

// ...

const handleOnClick = useCallback((_evt) => {
  console.log(randomNumber);
}, [randomNumber]);

// ...

Because this function relies on the value of this prop during execution, it should be recreated whenever this prop changes. Therefore, 

 is added to the dependency array. This component receives this 

 component. Within this component, let's add another button to set a 

import { useState } from "react";
import List from "./components/List";

export default function App() {
  const [numbers, setNumbers] = useState([0]);
  const [randomNumber, setRandomNumber] = useState(Math.random());

  const handleAddItemOnClick = (_evt) => {
    setNumbers((current) => current.concat(current[current.length - 1] + 1));
  };

  const handleGenerateNumberOnClick = (_evt) => {
    setRandomNumber(Math.random());
  };

  return (
    <>
      <List items={numbers} randomNumber={randomNumber} />
      <button type="button" onClick={handleAddItemOnClick}>
        Add Item
      </button>
      <button type="button" onClick={handleGenerateNumberOnClick}>
        Generate Number
      </button>
    </>
  );
}

Restart the application. If we click the "Add Item" button, then the number of 

 remains one regardless of how many times we click this button. 

However, if we click the "Generate Number" button, then the 

 component is updated to a new value and causes a re-render, which causes the 

 prop, a dependency, has changed. Now the set has two functions stored within it.

: If you see two functions being added to the set during any single re-render, then disable React Strict Mode from the root 

 method since it runs certain callbacks/methods twice in the development environment.

 hook. This hook accepts an inline callback and a dependencies array. It memoizes the callback and returns the memoized callback. Whenever a dependency changes, React recreates the callback, memoizes this newly created callback with 

, which returns the newly memoized function.

 hook accepts a "create" function and a dependencies array. The "create" function must return a value. 

 memoizes the value returned by this function and returns the memoized value. Whenever a dependency changes, 

 executes the "create" function to recompute the value, memoizes this value and returns the newly memoized value. If a dependencies array is not provided, then the value is recomputed on each re-render. 

This hook proves valuable for avoiding unnecessary expensive calculations involving large datasets. Suppose a component renders a large list of items and receives an 

 prop that is an array of items responsible for rendering the list of items. If the items of this 

 prop need to be normalized or transformed prior to rendering the list of items, then rendering the large list of items will be slow due to having to perform this extra step. 

 example and make several adjustments to the 

import { useCallback } from "react";

const List = ({ items, randomNumber }) => {
  const handleOnClick = useCallback(
    (_evt) => {
      console.log(randomNumber);
    },
    [randomNumber]
  );

  const transformedItems = items.map((item) => ({
    original: item,
    random: Math.random()
  }));

  return (
    <ul>
      {transformedItems.map((item) => (
        <li key={item} onClick={handleOnClick}>
          {JSON.stringify(item)}
        </li>
      ))}
    </ul>
  );
};

export default List;

 prop by converting each item to an object that preserves the original item's value and contains an additional field that holds a random number generated via 

If we click the "Generate Number" button, then notice that the value of the 

Clicking the "Generate Number" button changes the value of the 

 despite this computation not involving this prop whatsoever.

 prop changes and only recomputing it when the 

import { useCallback } from "react";

const List = ({ items, randomNumber }) => {
  const handleOnClick = useCallback(
    (_evt) => {
      console.log(randomNumber);
    },
    [randomNumber]
  );

  const transformedItems = useMemo(
    () =>
      items.map((item) => ({
        original: item,
        random: Math.random()
      })),
    [items]
  );

  return (
    <ul>
      {transformedItems.map((item) => (
        <li key={item} onClick={handleOnClick}>
          {JSON.stringify(item)}
        </li>
      ))}
    </ul>
  );
};

export default List;

Now, whenever we click the "Generate Number" button, the value of the 

 field remains unchanged. If we click the "Add Item" button, then the 

 hooks in your React applications. Remember to profile your application to identify its actual performance bottlenecks before using these hooks!

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

React Hooks - useCallback vs. useMemo

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript