React Hooks Cheat Sheet/useMemo memoized derived value

Cache an expensive derived computation.

Section: Performance and Concurrency Hooks

useMemo memoized derived value

tsx
tsx
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
Explanation

Use when a recalculation is expensive or when referential stability matters for child memoization.

Learn the surrounding workflow

Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.

Related commands

Same sheet · prioritizing Performance and Concurrency Hooks
useCallback stable callback
Memoize a callback passed to children.
OpenIn sheettsxsame section
useDeferredValue delay expensive rendering
Defer a value so expensive children lag behind urgent input.
OpenIn sheettsxsame section
useTransition for non-urgent updates
Mark updates as transitions.
OpenIn sheettsxsame section
useSyncExternalStore subscribe to external state
Read and subscribe to an external store consistently.
OpenIn sheettsxsame section
use API with context or promise
Read context or promise values with the `use` API.
OpenIn sheettsxsame section
useState lazy initializer
Compute expensive initial state once.
OpenIn sheettsx3 tag match