useMemo hook can be a helpful tool for optimizing the performance of
React components when making expensive calculations.
Here’s what the React
docs have to say about
Pass a “create” function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.
What does this mean in the context of an actual React component? Let’s imagine we have some value that requires an expensive calculation to determine: for example, mapping over a large array.
const someValue = doSomeExpensiveCalculation(a, b)
By default, React will recompute
someValue every time the component rerenders,
even if none of its dependencies change.
These unnecessary expensive computations could make our UI laggy. This is where
useMemo comes in:
const someValue = useMemo( () => doSomeExpensiveCalculation(a, b), [a, b] )
useMemo takes two arguments: the (expensive) function that computes the value
and a dependency array. Using
useMemo like this will ensure that
is only recomputed when one of its dependencies (
I’d also recommend using this ESLint plugin for React Hooks to ensure your dependency array contains each value referenced by the function. Otherwise, you might encounter some strange or unexepcted behavior.