Learn React Hooks

The useMemo Hook

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 ...