useMemo
Explore how to apply the useMemo Hook in React to memoize expensive calculations. Understand the difference between useMemo and useCallback, and learn to optimize function components to prevent redundant computations, improving rendering efficiency.
Difference between useMemo() and useCallback()
The other Hook that’s useful for performance optimization is the useMemo() Hook. We call it in the following way:
const memoizedValue = useMemo(valueGetterFunction, dependencyArray);
It works similarly to the useCallback() Hook. However, it does not provide a unique identity for the function going in, but for the return value from the function, which has been passed into the useMemo() Hook.
So, the following snippet of code:
useCallback(fn, deps);
corresponds to this snippet:
useMemo(() => fn, deps);