React useMemo vs lodash memoize (Day 83)

lodash is a super useful package for data manipulation. Especially with nested objects, get, set, and deepClone are essential helpers to update complicated objects.

lodash memoize is also frequently used to cache expensive calls or calculations. But there is a big catch you need to be aware of: lodash memoize caches only the 1st argument. See how the memoized sum for 1 + 2 and 1 + 3 both return 3 in the screencap above.

This design limits the lodash memoize use case for key-value caching only. If you want to cache expensive calls with multiple variables, you can now do it with React Hooks useMemo. See the example from the official React Hooks documentation:

const memoizedValue = useMemo(
  () => computeExpensiveValue(a, b),
  [a, b]
);

Similar to useEffect, you can specify the variables you need to monitor. This design allows more flexible memoize uses.