React.useMemo reference
2 May 2022 (Updated 5 May 2022)
On this page
What is useMemo?
You can use the useMemo
hook to memoize the result of an expensive computation. For example, in the snippet below, the computeExpensiveValue
function will only execute if a
or b
has changed since the last render.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
If you don’t use useMemo
, the new value will be computed on every render:
const value = computeExpensiveValue(a, b)
If you don’t provide a dependencies array, the function passed to useMemo
will always run on every render – making useMemo
useless:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b))
Sources
Tagged:
React
Thanks for your comment 🙏. Once it's approved, it will appear here.
Leave a comment