useMemo Hook

Introduction

Every time a React component re-renders, its entire function body runs again from top to bottom. Most of the time this is cheap — creating a few variables or a small JSX tree costs almost nothing. But sometimes a render includes a genuinely expensive calculation: sorting thousands of rows, filtering a huge array, or running a heavy math operation. Redoing that work on every single render, even when the relevant data has not changed, can slow an app down noticeably.

The useMemo Hook lets you tell React "only redo this calculation when these specific values change — otherwise, hand me back the answer you already computed." This lesson walks through exactly what useMemo does, how to use it correctly, and — just as importantly — when to leave it out.

The Problem: Expensive Recalculations

Imagine a component that holds a list of ten thousand products and also has a piece of unrelated state, like whether a sidebar is open. Every time you toggle that sidebar, the component re-renders — and if it filters or sorts the product list directly in the function body, that expensive work runs again even though the product list and the search term never changed.

function ProductList({ products, filterText, sidebarOpen }) {
  // This runs on EVERY render, even when only sidebarOpen changes
  const filtered = products.filter((p) =>
    p.name.toLowerCase().includes(filterText.toLowerCase())
  );

  return (
    <div>
      <p>{sidebarOpen ? "Sidebar is open" : "Sidebar is closed"}</p>
      <ul>
        {filtered.map((p) => (
          <li key={p.id}>{p.name}</li>
        ))}
      </ul>
    </div>
  );
}

With ten thousand items, re-running that filter on every unrelated state change can add up to a visibly janky UI. This is exactly the situation useMemo is designed for.

What is useMemo?

useMemo is a React Hook that memoizes — caches — the return value of a function. You give it a calculation function and a dependency array. React runs the function and stores the result on the first render. On every later render, React checks the dependency array: if none of the values have changed since last time, React skips re-running the function and simply returns the cached value from before.

useMemo Syntax

useMemo takes two arguments: a function that returns the value you want to cache, and a dependency array. React re-runs the function only when one of the dependencies has changed since the last render.

import { useMemo } from "react";

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

Example: Filtering a Large List

Let's fix the earlier ProductList component with useMemo. We wrap the filtering logic so it only reruns when products or filterText change — toggling the unrelated sidebarOpen state no longer triggers the expensive filter.

import { useMemo, useState } from "react";

function ProductList({ products, filterText }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const filtered = useMemo(() => {
    console.log("Filtering products...");
    return products.filter((p) =>
      p.name.toLowerCase().includes(filterText.toLowerCase())
    );
  }, [products, filterText]);

  return (
    <div>
      <button onClick={() => setSidebarOpen(!sidebarOpen)}>
        Toggle Sidebar
      </button>
      <p>{sidebarOpen ? "Sidebar is open" : "Sidebar is closed"}</p>
      <ul>
        {filtered.map((p) => (
          <li key={p.id}>{p.name}</li>
        ))}
      </ul>
    </div>
  );
}

Filtering products...   (only logged when products or filterText changes)

Clicking "Toggle Sidebar" re-renders the component but does NOT log
"Filtering products..." again, because filtered is reused from cache.

Notice the dependency array [products, filterText]. As long as those two values stay the same between renders, React returns the previously computed filtered array instead of running the filter function again.

When Not to Use useMemo

It is tempting to wrap every calculation in useMemo "just in case," but useMemo is not free. React still has to store the cached value, compare the dependency array on every render, and manage extra memory — and for a cheap calculation, that bookkeeping can cost more than simply redoing the calculation itself.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

useMemo gives you a precise tool for avoiding repeated, expensive calculations: it caches a computed value and only redoes the work when its dependencies actually change. Used well, it can turn a janky, laggy list into a smooth one — but used everywhere out of habit, it just adds needless complexity.

In this lesson, you saw the performance problem useMemo solves, its syntax, and a worked filtering example, along with a clear warning about when not to reach for it. Next, you will learn about useCallback, which applies the same memoization idea to functions instead of values.