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: https://stackblitz.com/edit/react-ueeptk
The code:
const value = useMemo(() => expensiveFunction(a), [a]);
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: https://stackblitz.com/edit/react-hpugxu
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)