DEV Community

Kenneth Lum
Kenneth Lum

Posted on

The useMemo() hook in ReactJS has a short memory

The useMemo() hook in React as of 16.8.0 can memoized a value for an expensive computation, but note that it has really "short memory".

To see how it works, look at the "console" to see when the expensive function is invoked:

The code:

  const value = useMemo(() => expensiveFunction(a), [a]);
Enter fullscreen mode Exit fullscreen mode

When it already did the calculation for a being 2, then it won't do it for 2 next time. Likewise for the 3 or 4.

However, it really can only memoize one value. If the first time, it did the calculation for 1, and next it did the calculation for 2, it won't remember what the result is for 1 any more. When supplied with 1 again, it will do the calculation again. Example:

The behavior is similar to React.memo(ComponentA), which can memoize a function component result and won't call it to render the React elements again as long as the props, state, and context stay the same.

Top comments (0)