Skip expensive recalculations
A component repeatedly renders while an expensive derived value has unchanged inputs.
React 19+ · Hook
useMemo
useMemo caches the result of a calculation between component renders. React reuses that result while its dependencies remain unchanged and recalculates it when they change.
How it works
Call useMemo at the top level with a pure, argument-free calculation and an inline dependency list. React returns the cached result when every dependency is unchanged by Object.is; otherwise it runs the calculation again and stores the new result.
Syntax
const cachedValue = useMemo(calculateValue, dependencies)Parameters
| Name | Type | Description |
|---|---|---|
calculateValue | () => any | A pure, argument-free function that computes the value to cache; React calls it during the initial render and when dependencies change. |
dependencies | Array<any> | An inline list containing every reactive value used by calculateValue; it must contain a constant number of items. |
Returns
The cached calculation result, or a newly computed result when dependencies change.
Key points
- It memoizes a computed value so later renders can reuse it.
- The calculation receives no arguments, has no side effects, and returns the value to cache.
- When every dependency is Object.is-equal to its previous value, React returns the existing cached value.
- Any changed dependency invalidates the cache and causes the calculation to execute again.
- Dependencies should cover all reactive values referenced by the calculation.
Common mistakes
- Do not call useMemo inside loops or conditions; move conditional logic into a separate component or Hook.
- Keep the dependency array inline with a fixed number of entries; include every reactive value used by the calculation.
Example: Cache a derived list
import { memo, useMemo, useState } from 'react';
const TodoList = memo(function TodoList({ todos, tab }) {
const visibleTodos = useMemo(
() => todos.filter(todo => todo.tab === tab),
[todos, tab]
);
return <ul>{visibleTodos.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>;
});
export default function App() {
const [tab, setTab] = useState('all');
const todos = [{ id: 1, tab: 'all', text: 'Learn React' }];
return <TodoList todos={todos} tab={tab} />;
}The filtered array is reused when neither todos nor tab changes.
When to use it
Preserve stable references
A memoized child needs a stable derived object or array so unchanged props can remain referentially equal.
Cache client-component computations
A client component needs to retain an expensive computation across its renders.
Interview questions
QWhat does useMemo do?
useMemo caches a calculation result between renders. React compares the dependency entries with their previous values using Object.is; unchanged dependencies reuse the prior value, while changed dependencies trigger recalculation.
Follow-up: What must the calculation and dependency list look like? The calculation should be pure and take no arguments, and the list should include every reactive value it reads with a constant inline shape.
QWhere may useMemo be called?
Call it at the top level of a component or custom Hook, never inside a loop or condition. Its purpose is to cache a computed value, not to perform side effects.
Follow-up: How should conditional computation be structured? Extract a component or custom Hook so the Hook call remains unconditional at the top level.
QHow do you choose dependencies?
The dependency list must contain every value from the component used by the calculation, including props, state, and locally declared variables or functions. React uses that list to decide whether the cached value remains valid.
Follow-up: What happens when a dependency is omitted? React may reuse a stale result because the change is invisible to the dependency comparison.
Related
useCallbackmemocacheReact Compiler