The useMemo Hook takes a result of a function and memoizes it. This means that it will not be recomputed every time. This Hook can be used for performance optimizations:
const memoizedVal = useMemo(
() => computeVal(a, b, c),
[a, b, c]
)
In the previous example, computeVal is a performance-heavy function that computes a result from a, b, and c.
useMemo runs during rendering, so make sure the computation function does not cause any side effects, such as resource requests. Side effects should be put into a useEffect Hook.
The array passed as the second argument specifies the dependencies of the function. If any of these values change, the function will be recomputed; otherwise, the stored result will be used. If no array is provided, a new value will be computed on every render. If an empty array is passed, the value will only be computed once.
Do not rely on useMemo to only compute things once. React may forget some previously memoized values if they are not used for a long time, for example, to free up memory. Use it only for performance optimizations.
The useMemo Hook is used for performance optimizations in React components.