What does useMemo() do?

ReactJunior~3 min read

What `useMemo()` does

The useMemo() hook is memoization of a computed value. It remembers the result of running a function between renders and recomputes it only when the dependencies change.

Syntax

javascript

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

The first argument is a function that returns a result (a computation, filtering, sorting, etc.).
The second is a dependency array [a, b].

React remembers the result, and on the next render:

if the dependencies have not changed -> it returns the old value;
if the dependencies have changed -> it recomputes it.

Example without `useMemo`

javascript

function App({ list }) {
  const sorted = list.sort(); // every render - a sort
  return <List items={sorted} />;
}

Every render will call list.sort(), and even if list has not changed, a new array is created.

If <List /> is memoized with React.memo, it will still re-render, because sorted is a new reference (a new object in memory).

With `useMemo`

javascript

function App({ list }) {
  const sorted = useMemo(() => [...list].sort(), [list]);
  return <List items={sorted} />;
}

Now:

While list has not changed, React returns the old reference to sorted;
List (if it is React.memo) will not re-render;
This prevents unnecessary re-renders and unnecessary computations.

Example with a computation

javascript

function ExpensiveComponent({ value }) {
  const heavyResult = useMemo(() => {
    console.log('expensive calculation');
    return fibonacci(value); // say, an expensive function
  }, [value]);

  return <div>Result: {heavyResult}</div>;
}

Without useMemo:

On every render, fibonacci(value) is called, even if value has not changed.

With useMemo:

The computation happens only once, while value stays the same -> React returns the cached result.

How `useMemo` helps avoid unnecessary re-renders

Scenario: a "memoized child"

javascript

const Child = React.memo(({ data }) => {
  console.log('Child render');
  return <div>{data.length}</div>;
});

function Parent({ items }) {
  const processed = useMemo(() => items.filter(i => i.active), [items]);
  return <Child data={processed} />;
}

If items have not changed, -> processed stays the same reference -> React.memo understands that the data prop has not changed -> Child does not re-render.

Without useMemo, processed would be created anew, and Child would re-render every time, even with unchanged data.

What `useMemo` caches

Value type	Cached?	Example
Primitives	Yes	`number`, `string`, `boolean`
Objects and arrays	Yes	`const arr = useMemo(() => [...list], [list])`
A function's result	Yes	`useMemo(() => compute(), [deps])`
The function itself	No -> for that, `useCallback()`

useCallback(fn, deps) is simply shorthand for useMemo(() => fn, deps).

When you should use `useMemo`

Use it if:

There is an expensive computation (filtering, sorting, counting);
You need to keep a reference to an object/array between renders (for React.memo);
The component re-renders often, while the dependent data changes rarely.

When you do not need to use it

Do not apply it everywhere:

If the computation is cheap (a few operations), useMemo will only slow things down (React still compares the deps, creates a cache);
If the component re-renders fully anyway (and useMemo does not participate in other components' props);
If the data is already stable by reference (for example, you are not creating a new object every time).

Summary: useMemo vs useCallback

Hook	What it does	Returns	Typical purpose
`useMemo(fn, deps)`	Caches the result of a computation	A value	Keep a result between renders
`useCallback(fn, deps)`	Caches a function	A function	Keep a reference to a handler

Short and to the point

What it does	How it helps
Caches the result of computations	Avoids repeating heavy operations
Keeps a reference to an object/array	Helps `React.memo` see that a prop has not changed
Only works when the dependencies are unchanged	React returns the old value
Reduces the number of re-renders	Child components do not repaint

Short Answer

Interview ready

Premium

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