When to use use-memo

What is use-memo

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. [a, b] )

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 use-memo

• If a calculation was not quite complex, we should not use use-memo due to the overhead of use-memo.
• use-memo maintains 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.