What is useMemo in React?

useMemo is a React Hook used to memoize (cache) the result of an expensive computation so that it is not recalculated on every render.

It improves performance by recomputing the value only when dependencies change.

Syntax

const memoizedValue = useMemo(() => {
   return expensiveCalculation(data);
}, [data]);

• First argument → function that returns computed value

• Second argument → dependency array

• React recalculates the value only if dependencies change

Simple Example

Without useMemo:

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

  const expensiveValue = slowFunction();

  return (
    <div>
      <p>{expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Problem:

• slowFunction() runs on every render

• Even when only count changes

With useMemo:

import { useMemo, useState } from "react";

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

  const expensiveValue = useMemo(() => {
    return slowFunction();
  }, []);

  return (
    <div>
      <p>{expensiveValue}</p>

      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Now:

• slowFunction() runs only once

• Cached value is reused

Real-World Example

Filtering a large list:

const filteredUsers = useMemo(() => {
   return users.filter(user => user.active);
}, [users]);

Why?

• Filtering large arrays repeatedly can be expensive

• useMemo avoids recalculation unless users changes

Interview Definition

"useMemo is a React Hook that memoizes the result of a computation and recalculates it only when dependencies change, helping optimize performance."

When to Use useMemo

Use it when:

✅ Expensive calculations
✅ Large list filtering/sorting
✅ Preventing unnecessary recalculations
✅ Optimizing renders in performance-heavy components

Examples:

• Sorting tables

• Complex mathematical calculations

• Data transformations

• Filtering/searching large datasets

When NOT to Use It

Do NOT use useMemo everywhere.

Wrong usage:

const name = useMemo(() => "John", []);

This adds unnecessary overhead.

Use it only when:

• Calculation is expensive OR

• Re-renders are causing performance issues

useMemo vs useCallback

Feature	useMemo	useCallback
Returns	Memoized value	Memoized function
Purpose	Cache computed result	Cache function reference
Use Case	Expensive calculations	Prevent child re-renders

Example:

const value = useMemo(() => calculate(), []);

const handler = useCallback(() => {
   console.log("Clicked");
}, []);

Important Interview Point

useMemo is a performance optimization, not a guarantee.

React may discard memoized values in some cases.

So:

• Use it to optimize performance

• Not to make logic work correctly

Common Interview Questions

1. Does useMemo prevent component re-rendering?

No.

It only memoizes a value.

To prevent component re-renders:

• use React.memo

• optimize props/functions

2. What happens if dependencies change?

The memoized value is recalculated.

useMemo(() => calculate(a), [a]);

If a changes → recalculates.

3. Can useMemo improve every application?

No.

Overusing it can reduce readability and even hurt performance because memoization itself has a cost.

Common Mistake

Incorrect dependency array:

const value = useMemo(() => calculate(a), []);

If a changes, value becomes stale.

Correct:

const value = useMemo(() => calculate(a), [a]);

Short Interview Answer

"useMemo is used to memoize expensive computations in React. It recalculates the value only when dependencies change, helping improve performance by avoiding unnecessary calculations."