React useMemo hook use cases

The React.useMemo hook is fundamentally a memoization utility. In computing, memoization is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls to pure functions and returning the cached result when the same inputs occur again.

That said it has multiple use cases but for React we can narrow them to two fundamentally categories:

Caching results of expensive function calls
Preserving referential integrity of values to prevent needless re-renders

useMemo for expensive function calls

A fundamental use case for useMemo that aligns with the fundamental concept of memoization is caching the results of expensive function call so they don't happen in the standard render path of a component.

For example, in the below example the fibonacci call is only made when the num in the dependency array changes. So it is not called when other things change (like the name field).

App.tsx

import { useState } from "react";
import { useMemo } from "react";

function fibonacci(index: number): number {
  if (index <= 1) return 1;
  return fibonacci(index - 1) + fibonacci(index - 2);
}

export default function App() {
  const [name, setName] = useState("");
  const [num, setNum] = useState(0);

  const result = useMemo(() => fibonacci(num), [num]);

  return (
    <>
      <input
        type="number"
        value={num}
        onChange={(e) => setNum(Number(e.target.value))}
      />
      <div>Result: {result}</div>

      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <div>Name: {name}</div>
    </>
  );
}

Referential equality recap

Here is a quick recap of referential integrity, a concept we covered in our JavaScript course:

const alpha = ['apple'];
const beta = ['apple'];
alpha === beta; // false

alpha === alpha; // true
beta === beta; // true

{
  const fruits = ['apple', 'banana'];
  const n = 1;
  const items1 = original.slice(0, n); // ['apple']
  const items2 = original.slice(0, n); // ['apple']
  items1 === items2; // false
}

{
  const fruits = ['apple', 'banana'];
  const n = 1;
  // render 1
  const items1 = useMemo(() => original.slice(0, n), [n]); // ['apple']
  // render 2
  const items2 = useMemo(() => original.slice(0, n), [n]); // ['apple']
  // Thank you useMemo!
  items1 === items2; // true
}

useMemo to preserve referential equality

By utilizing useMemo we can cache objects that are not changing to ensure that pure components can reliably use equality to prevent re-renders.

This is demonstrated in the below example where the call to slice is memoized to preserve its referential integrity.

App.tsx

import { useState, memo, useMemo } from 'react';

/** Example pure component */
const List = memo((props: { items: string[] }) => {
  console.log('List rendered');
  return (
    <ul>
      {props.items.map((item, i) => <li key={i}>{item}</li>)}
    </ul>
  );
});

const fruits = ['apple', 'banana', 'orange', 'pear', 'grape'];

export default function App() {
  const [name, setName] = useState('');

  const [count, setCount] = useState(0);
  const inc = () => setCount(count => Math.min(count + 1, fruits.length));
  const dec = () => setCount(count => Math.max(count - 1, 0));

  /** Preserve referential integrity with `useMemo` */
  const items = useMemo(() => fruits.slice(0, count), [count]);

  return (
    <>
      <input value={name} onChange={e => setName(e.target.value)} />

      <div>
        <button onClick={dec}>-</button>
        <span> {count} </span>
        <button onClick={inc}>+</button>
      </div>

      {/* Use the result of `useMemo` for the pure component */}
      <List items={items} />
    </>
  );
}

Transcript