`useMemo`

Caches the result of an expensive calculation between re-renders.

Since React 16.8 Spec ↗

Syntax

const value = useMemo(calculateValue, dependencies)

Parameters

Name	Type	Required	Description
`calculateValue`	`function`	Yes	Pure function returning the value to cache; called when dependencies change.
`dependencies`	`array`	Yes	Reactive values; the memo recomputes only when one changes.

Returns

any — The cached value, recomputed only when a dependency changes.

Examples

const sorted = useMemo(
  () => items.slice().sort(compare),
  [items]
);

const value = useMemo(() => ({ id }), [id]);

Notes

Use it to skip costly recomputation or to keep a stable object/array identity for dependency arrays and memoized children. It is a performance optimization only: React may discard the cache. Do not put side effects in the calculation.