useMemo and useCallback: Memoization Concepts

useMemo and useCallback are memoization hooks: they let React skip recomputing a value or recreating a function on every render, as long as its dependencies have not changed. Both exist to address performance concerns and, importantly, referential equality issues — cases where two values are logically "the same" but JavaScript treats them as different objects because they were freshly created.

Neither hook is about correctness in the way useState or useEffect are; a component will still work without them. They are optimizations, and reaching for them everywhere "just in case" often adds complexity without a measurable benefit. They matter most when an expensive calculation is being repeated unnecessarily, or when a new function/object reference is defeating another optimization such as React.memo.

Why it matters

Every render of a component re-runs its whole function, recomputing values and creating new function objects. Usually that is fine. When a calculation is expensive, or a new function reference makes a memoised child re-render needlessly, these two hooks help. Knowing when not to use them matters just as much.

useMemo: Memoizing a Computed Value

useMemo(() => computeExpensiveValue(a, b), [a, b]) only re-runs the computation when a or b changes; on any other re-render (triggered by unrelated state, for example), it reuses the previously computed result instead of recalculating it. This is valuable when a calculation is genuinely expensive — sorting a large array, filtering a big dataset — and the component re-renders often for unrelated reasons.

useCallback: Memoizing a Function Reference

useCallback(fn, [deps]) returns the same function reference across renders as long as the dependencies have not changed, instead of creating a brand-new function object every render. Since every function declared inside a component body is a new object each render, passing a fresh callback into a child on every render can defeat memoization on that child (such as a child wrapped in React.memo), because the child sees "different props" even though the callback does logically the same thing.

Referential Equality: Why This Matters

JavaScript compares objects and functions by reference, not by structure — two separately created objects with identical contents are never === equal. React's optimizations, like React.memo and the dependency arrays of useEffect/useMemo/useCallback themselves, rely on this reference comparison to decide "did this actually change?" Without memoization, a new object or function literal created during every render will always look "changed," even when its content is identical to before.

• Use useMemo when a computation is measurably expensive and its inputs rarely change compared to how often the component re-renders.
• Use useCallback when passing a callback to a memoized child component, or when the function itself is a dependency of another hook.
• Do not reach for either hook by default — the memoization bookkeeping itself has a small cost, and premature use adds noise without benefit.

Example

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

const ExpensiveList = memo(function ExpensiveList({ items, onSelect }) {
  console.log('ExpensiveList rendered');
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id} onClick={() => onSelect(item.id)}>{item.name}</li>
      ))}
    </ul>
  );
});

function ProductBrowser({ products, searchTerm }) {
  const [selectedId, setSelectedId] = useState(null);

  const filteredProducts = useMemo(
    () => products.filter((p) => p.name.toLowerCase().includes(searchTerm.toLowerCase())),
    [products, searchTerm]
  );

  const handleSelect = useCallback((id) => {
    setSelectedId(id);
  }, []);

  return (
    <div>
      <ExpensiveList items={filteredProducts} onSelect={handleSelect} />
      {selectedId && <p>Selected product ID: {selectedId}</p>}
    </div>
  );
}

export default ProductBrowser;

The expensive filtering only re-runs when products or searchTerm actually change (thanks to useMemo); because handleSelect keeps the same function reference across renders (thanks to useCallback) and ExpensiveList is wrapped in React.memo, clicking a product to update selectedId does not cause ExpensiveList to needlessly re-render or log "ExpensiveList rendered" again.

Exercise

Do this in src/App.jsx of a Vite + React project. The component filters a list of products on every render, including when only the unrelated counter changes. Wrap the filtering in useMemo so that it runs only when the search text or the products change, and wrap the handler passed to the memoised SearchBox in useCallback.

Expected result: clicking the counter no longer re-runs the filter or re-renders SearchBox; typing in the box does.

import { memo, useState } from "react";

const PRODUCTS = ["pen", "pencil", "bag", "book", "bottle"];

const SearchBox = memo(function SearchBox({ onSearch }) {
  return <input onChange={(event) => onSearch(event.target.value)} placeholder="Search" />;
});

export default function App() {
  const [query, setQuery] = useState("");
  const [clicks, setClicks] = useState(0);

  // TODO: memoise this
  const visible = PRODUCTS.filter((product) => product.includes(query));

  // TODO: give this a stable identity
  const handleSearch = (text) => setQuery(text);

  return (
    <div>
      <SearchBox onSearch={handleSearch} />
      <button onClick={() => setClicks(clicks + 1)}>Clicked {clicks}</button>
      <ul>
        {visible.map((product) => (
          <li key={product}>{product}</li>
        ))}
      </ul>
    </div>
  );
}

import { memo, useCallback, useMemo, useState } from "react";

const PRODUCTS = ["pen", "pencil", "bag", "book", "bottle"];

const SearchBox = memo(function SearchBox({ onSearch }) {
  return <input onChange={(event) => onSearch(event.target.value)} placeholder="Search" />;
});

export default function App() {
  const [query, setQuery] = useState("");
  const [clicks, setClicks] = useState(0);

  const visible = useMemo(
    () => PRODUCTS.filter((product) => product.includes(query)),
    [query]
  );

  const handleSearch = useCallback((text) => setQuery(text), []);

  return (
    <div>
      <SearchBox onSearch={handleSearch} />
      <button onClick={() => setClicks(clicks + 1)}>Clicked {clicks}</button>
      <ul>
        {visible.map((product) => (
          <li key={product}>{product}</li>
        ))}
      </ul>
    </div>
  );
}

Quick quiz

Interview questions