const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
It returns a memoized value.
- 1st argument : function ( e.g.
() => computeExpensiveValue(a, b))
- 2nd argument ( e.g.
useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.
Purpose to use
- If a calculation was not quite complex, we should not use
use-memodue to the overhead of
use-memomaintains variable objects, so it is helpful to avoid re-rendering when not needed.
Confirm by Profiler of React Developer Tools
Make sure to profile the component with and without
use-memo. Only after they conclude whether memoization is worth it.
When memoization is misused, it could harm the performance.