What does useMemo() do?

ReactMiddle~2 min read

What `useMemo()` does

The useMemo() hook memoizes (caches) the result of a function's computation and reuses it if the dependencies have not changed.

In simpler terms: useMemo exists so you do not recompute something heavy on every render, when the input data has not changed.

Syntax

javascript

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

The first argument is a function that returns the computed value.
The second argument is the dependency array.
React remembers the result of this function and recomputes it only when at least one of the dependencies [a, b] changes.

A simple example

javascript

import { useMemo, useState } from "react";

function Example() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const expensiveCalculation = (num) => {
    console.log("Running an expensive calculation...");
    let result = 0;
    for (let i = 0; i < 1e7; i++) {
      result += num * 2;
    }
    return result;
  };

  // useMemo memoizes the result
  const result = useMemo(() => expensiveCalculation(count), [count]);

  return (
    <div>
      <p>Result: {result}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
}

What happens:

The "expensive calculation" (expensiveCalculation) runs only when count changes.
Changing text does not recompute result.
This saves performance on frequent renders.

Example without useMemo (bad)

If you remove useMemo:

javascript

const result = expensiveCalculation(count);

Every render, even when only text changes, will call expensiveCalculation() again, even if count has not changed.

When `useMemo` is useful

Situation	Example
Heavy computations	sorting, filtering, large loops
Computing derived data	for example, filtering a user list by a search term
Optimizing renders of child components	to avoid passing a new object on every render

Example: preventing unnecessary renders

javascript

function Parent({ users }) {
  const [filter, setFilter] = useState("");

  // Without useMemo: a new array is created on every render
  // With useMemo: it is created only when users or filter changes
  const filtered = useMemo(
    () => users.filter((u) => u.name.includes(filter)),
    [users, filter]
  );

  return <UserList users={filtered} />;
}

If UserList is wrapped in React.memo, it will not re-render until filtered changes.

Important

Trait	Explanation
`useMemo` caches the result of a function, not the function itself	For functions, use `useCallback`
Use it only for genuinely expensive computations	Do not "wrap everything"
Works only with unchanged dependencies	If at least one changes, it recomputes

Difference between `useMemo` and `useCallback`

Hook	What it caches	Returns
`useMemo`	the function's result	a value
`useCallback`	the function itself	a function

Example:

javascript

const value = useMemo(() => compute(), [deps]);
const fn = useCallback(() => doSomething(), [deps]);

Summary

Question	Answer
What does `useMemo()` do	Caches a function's result so it is not recomputed on every render
When it recomputes	When at least one dependency changes
What it returns	The stored (memoized) value
Why it is needed	To optimize heavy computations and prevent unnecessary re-renders
Not to be confused with	`useCallback` (it caches the function itself)

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.