useMemo Hook — Complete React Interview Guide

What useMemo does

useMemo memoizes the result of a computation. The function you pass is only called when the dependencies change. Between dependency changes, React returns the cached result.

const memoizedValue = useMemo(() => {
  return expensiveComputation(a, b)
}, [a, b])
 
// First render: calls expensiveComputation(a, b), stores result
// Re-render, same a and b: returns cached result immediately
// Re-render, a changed: calls expensiveComputation(newA, b), stores new result

Use case 1 — Expensive computations

// Without useMemo — re-sorts on every render, even unrelated renders
function ProductList({ products, sortBy, searchQuery }) {
  const [count, setCount] = useState(0)  // unrelated state
 
  // This runs even when count changes — wasteful for 10,000 products
  const sorted = [...products].sort((a, b) =>
    sortBy === 'price' ? a.price - b.price : a.name.localeCompare(b.name)
  )
 
  return <ul>{sorted.map(p => <Item key={p.id} product={p} />)}</ul>
}
 
// With useMemo — only re-sorts when products or sortBy changes
function ProductList({ products, sortBy, searchQuery }) {
  const [count, setCount] = useState(0)
 
  const sorted = useMemo(() => {
    console.log('sorting...') // only logs when products or sortBy changes
    return [...products].sort((a, b) =>
      sortBy === 'price' ? a.price - b.price : a.name.localeCompare(b.name)
    )
  }, [products, sortBy])
 
  return <ul>{sorted.map(p => <Item key={p.id} product={p} />)}</ul>
}

Use case 2 — Referential stability for React.memo

React.memo does a shallow comparison of props. If you pass an object or array created inline, the reference changes every render — React.memo can never skip.

const HeavyChart = React.memo(({ config }) => {
  // expensive rendering
  return <Chart {...config} />
})
 
// ✗ Defeats React.memo — new config object every render
function Dashboard() {
  const config = { color: 'blue', type: 'bar', animate: true }
  return <HeavyChart config={config} />  // HeavyChart re-renders always!
}
 
// ✓ Stable reference — React.memo can skip re-renders
function Dashboard() {
  const config = useMemo(() => ({
    color: 'blue', type: 'bar', animate: true
  }), [])  // stable — empty deps, never changes
 
  return <HeavyChart config={config} />  // HeavyChart skips re-renders ✓
}

Use case 3 — Referential stability for useEffect

useEffect uses the same reference comparison for its dependency array. An object created inline changes reference every render — the effect runs every render.

// ✗ Infinite loop — fetchConfig is new every render
function UserDashboard({ userId }) {
  const fetchConfig = { headers: { 'X-User': userId }, timeout: 5000 }
 
  useEffect(() => {
    fetchUserData(userId, fetchConfig)
  }, [userId, fetchConfig])  // fetchConfig is new every render → infinite loop!
}
 
// ✓ Stable reference — effect runs only when userId changes
function UserDashboard({ userId }) {
  const fetchConfig = useMemo(() => ({
    headers: { 'X-User': userId },
    timeout: 5000
  }), [userId])  // new reference only when userId changes
 
  useEffect(() => {
    fetchUserData(userId, fetchConfig)
  }, [userId, fetchConfig])  // ✓ runs only when userId changes
}

The performance trade-off — when NOT to use useMemo

useMemo itself has a cost on every render: allocates memory for the cache, runs the dependency comparison, and retains the old value in memory. For simple computations, the memoization overhead may exceed the computation cost.

// ✗ Over-memoization — useMemo costs MORE than the compute
const fullName = useMemo(() => first + ' ' + last, [first, last])
// String concat is O(n) microseconds. useMemo comparison is O(m) where m = deps.length.
// Net result: slower.
 
// ✓ Compute inline — faster
const fullName = first + ' ' + last
 
// ✗ Memoizing primitive values — pointless
const doubled = useMemo(() => count * 2, [count])
// Numbers are compared by value — React already handles this efficiently
 
// ✓ Worth memoizing
const chartData = useMemo(() => {
  return rawData
    .filter(d => d.date >= startDate && d.date <= endDate)
    .map(d => ({ x: d.date, y: d.value }))
    .reduce(/* ... aggregation ... */)
}, [rawData, startDate, endDate])  // O(n) with significant constant — worth caching

useMemo vs useCallback — the key distinction

// useMemo — memoizes the RESULT of calling a function
const processedData = useMemo(() => expensiveTransform(rawData), [rawData])
// processedData is a value (array, object, number, etc.)
 
// useCallback — memoizes the FUNCTION ITSELF
const handleChange = useCallback(e => setValue(e.target.value), [])
// handleChange is a stable function reference
 
// They are literally equivalent:
useCallback(fn, deps) === useMemo(() => fn, deps)
 
// You could implement useCallback with useMemo:
const stableFn = useMemo(() => (...args) => doSomething(...args), [dep])

Referential equality — why it matters

// JavaScript compares objects by reference, not content
{ a: 1 } === { a: 1 }   // false — different objects in memory
[1, 2, 3] === [1, 2, 3] // false — different arrays
() => {} === () => {}    // false — different functions
 
// React.memo and useEffect deps use Object.is — same as ===
// This is why inline objects/arrays always "change" between renders

The React Compiler — the future of memoization

The React Compiler (shipping in React 19) automatically applies memoization at the compiler level. It analyses your component code and inserts useMemo/useCallback calls where they would be beneficial — without you writing them manually.

// What you write (no memoization):
function ProductList({ products, sortBy }) {
  const sorted = products.slice().sort((a, b) => a[sortBy] - b[sortBy])
  return <ul>{sorted.map(p => <Item key={p.id} product={p} />)}</ul>
}
 
// What React Compiler produces (conceptually):
function ProductList({ products, sortBy }) {
  const sorted = useMemo(() => products.slice().sort((a, b) => a[sortBy] - b[sortBy]), [products, sortBy])
  return <ul>{sorted.map(p => <Item key={p.id} product={p} />)}</ul>
}

With the React Compiler enabled, manually written useMemo calls become largely unnecessary. This is why the advice is: write clean code first, add useMemo only where profiling confirms a bottleneck — the compiler will handle the rest.