useMemo and useCallback Correctly

Memoization in React Has One Purpose: Referential Equality

Here's the thing most people get wrong about these hooks: they reach for useMemo and useCallback to "make things faster." That's usually the wrong reason. These hooks exist to preserve referential equality — ensuring that the same object/function reference is reused across renders so that downstream consumers (React.memo, useEffect dependencies, context values) do not trigger unnecessary work.

// Without useMemo — new array every render
const filtered = items.filter(i => i.active);
// Object.is(prevFiltered, nextFiltered) → false (always)

// With useMemo — same array when items and filter do not change
const filtered = useMemo(() => items.filter(i => i.active), [items]);
// Object.is(prevFiltered, nextFiltered) → true (when items is same)

useMemo: Caching Computed Values

const expensiveResult = useMemo(() => {
  return heavyComputation(data);
}, [data]);

useMemo calls the function and caches its return value. It only re-computes when a dependency changes.

When useMemo Actually Helps

1. Expensive computations with the same inputs:

function Dashboard({ transactions }) {
  // Sorting 10,000 transactions on every render is wasteful
  const sorted = useMemo(
    () => [...transactions].sort((a, b) => b.date - a.date),
    [transactions]
  );

  return <TransactionList transactions={sorted} />;
}

2. Preserving reference for React.memo children:

const MemoizedList = React.memo(function List({ items }) {
  return items.map(item => <li key={item.id}>{item.name}</li>);
});

function Parent() {
  const [query, setQuery] = useState('');
  const [items, setItems] = useState(allItems);

  // Without useMemo, filtered is a new array every render.
  // MemoizedList re-renders because items prop changed (new reference).
  const filtered = useMemo(
    () => items.filter(i => i.name.includes(query)),
    [items, query]
  );

  return <MemoizedList items={filtered} />;
}

3. Stabilizing context values:

function ThemeProvider({ children }) {
  const [mode, setMode] = useState('light');

  const value = useMemo(() => ({
    mode,
    toggle: () => setMode(m => m === 'light' ? 'dark' : 'light'),
  }), [mode]);

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

useCallback: Caching Function References

useCallback(fn, deps) is syntactic sugar for useMemo(() => fn, deps):

// These are equivalent:
const handleClick = useCallback(() => {
  setCount(c => c + 1);
}, []);

const handleClick = useMemo(() => {
  return () => setCount(c => c + 1);
}, []);

When useCallback Actually Helps

1. Passing callbacks to React.memo children:

const MemoizedButton = React.memo(function Button({ onClick, label }) {
  console.log('Button rendered:', label);
  return <button onClick={onClick}>{label}</button>;
});

function Toolbar() {
  const [count, setCount] = useState(0);

  // Without useCallback: new function every render → MemoizedButton re-renders
  const handleSave = useCallback(() => {
    save();
  }, []);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <MemoizedButton onClick={handleSave} label="Save" />
    </div>
  );
}

2. As useEffect dependencies:

function Chat({ roomId }) {
  const createConnection = useCallback(() => {
    return new WebSocket(`wss://chat.example.com/${roomId}`);
  }, [roomId]);

  useEffect(() => {
    const ws = createConnection();
    return () => ws.close();
  }, [createConnection]); // Stable when roomId is stable
}

When NOT to Use Them

// UNNECESSARY — no consumer checks referential equality
function Component() {
  // No React.memo child, no useEffect dep, no context value
  const handleClick = useCallback(() => {
    doSomething();
  }, []); // Wasted — no one benefits from this being stable

  return <button onClick={handleClick}>Click</button>;
}

// UNNECESSARY — the computation is trivial
function Component({ items }) {
  const count = useMemo(() => items.length, []); // Overkill
  // items.length is O(1) — cheaper than the useMemo overhead itself
}

// UNNECESSARY — primitive values are already stable
function Component({ name }) {
  const greeting = useMemo(() => `Hello, ${name}`, [name]);
  // String concatenation is instant. useMemo adds overhead for nothing.
}

The Decision Framework

Ask these questions before adding useMemo or useCallback:

1. Is the value passed to a React.memo component? → Maybe useMemo/useCallback
2. Is the value in a useEffect dependency array? → Maybe useMemo/useCallback
3. Is the value a context Provider value? → Probably useMemo
4. Is the computation genuinely expensive (>1ms)? → Maybe useMemo
5. None of the above? → Do not memoize

Production Scenario: Data Table with Memoized Derived State

const MemoizedRow = React.memo(function Row({ item, onDelete }) {
  return (
    <tr>
      <td>{item.name}</td>
      <td>{item.price}</td>
      <td><button onClick={() => onDelete(item.id)}>Delete</button></td>
    </tr>
  );
});

function DataTable({ items, sortField, filterQuery }) {
  const processedItems = useMemo(() => {
    let result = items;
    if (filterQuery) {
      result = result.filter(i =>
        i.name.toLowerCase().includes(filterQuery.toLowerCase())
      );
    }
    result = [...result].sort((a, b) =>
      a[sortField] > b[sortField] ? 1 : -1
    );
    return result;
  }, [items, sortField, filterQuery]);

  const handleDelete = useCallback((id) => {
    deleteItem(id);
  }, []);

  return (
    <table>
      <tbody>
        {processedItems.map(item => (
          <MemoizedRow
            key={item.id}
            item={item}
            onDelete={handleDelete}
          />
        ))}
      </tbody>
    </table>
  );
}

Challenge: Optimize the Filtered List

Challenge: Strategic Memoization

// This component re-renders every child on every keystroke
// even though only the filtered list changes. Add memoization
// in the right places — and ONLY the right places.

function App() {
  const [query, setQuery] = useState('');
  const [items] = useState([
    { id: 1, name: 'React' },
    { id: 2, name: 'Vue' },
    { id: 3, name: 'Angular' },
    { id: 4, name: 'Svelte' },
  ]);

  const filtered = items.filter(i =>
    i.name.toLowerCase().includes(query.toLowerCase())
  );

  const handleDelete = (id) => {
    console.log('Delete', id);
  };

  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <Stats count={filtered.length} />
      {filtered.map(item => (
        <ItemCard key={item.id} item={item} onDelete={handleDelete} />
      ))}
    </div>
  );
}

function Stats({ count }) {
  console.log('Stats rendered');
  return <p>`{count}` results</p>;
}

function ItemCard({ item, onDelete }) {
  console.log('ItemCard rendered:', item.name);
  return (
    <div>
      `{item.name}`
      <button onClick={() => onDelete(item.id)}>X</button>
    </div>
  );
}

const MemoizedStats = React.memo(Stats);
const MemoizedItemCard = React.memo(ItemCard);

function App() {
  const [query, setQuery] = useState('');
  const [items] = useState([
    { id: 1, name: 'React' },
    { id: 2, name: 'Vue' },
    { id: 3, name: 'Angular' },
    { id: 4, name: 'Svelte' },
  ]);

  const filtered = useMemo(
    () => items.filter(i =>
      i.name.toLowerCase().includes(query.toLowerCase())
    ),
    [items, query]
  );

  const handleDelete = useCallback((id) => {
    console.log('Delete', id);
  }, []);

  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <MemoizedStats count={filtered.length} />
      {filtered.map(item => (
        <MemoizedItemCard key={item.id} item={item} onDelete={handleDelete} />
      ))}
    </div>
  );
}