For the longest time, I read the word memoized as memorized without realizing it. Luckily, these are different words but mean similar things.
A person memorizes things by committing them to their memory to be retrieved at a later time. Memoization, however, is an optimization technique in software that stores the results of an expensive computation and returning the cached results when the same input occurs again.
This idea is important when thinking around useMemo and how it returns a memoized value. Any function passed into useMemo would only be recomputed when one of the values passed as a dependency change.
const [c, setC] = useState(0);// This value will not be recomputed between re-renders
// unless the value of c changes
const tanOfC = useMemo(() => Math.tan(c) , [c])
useMemo vs useEffect
If you’re thinking about how this idea of watching for dependency changes differs from what we already do with useEffect, here you go.
The default behavior of useEffect is to be called after each completed render while the function passed into useMemo gets called during the render phase. This means that fetching data, logging, and setting timer — side effects — are should still be done in useEffect.
The other main difference goes back to the idea of memoization. Unlike useEffect, between renders, useMemo will only recompute the memoized value when one of the dependencies has changed. useEffect will only check if any of the dependencies have changed after each render has been committed to the screen.
useMemo vs useCallback
Both hooks use referential equality to look for changes in any dependencies, that is, they check whether the values in the dependency array in the next run match those of the previous run. If they do, React does not bother running the function again and instead returns the cached value.
The main difference between these hooks is that useMemo returns a memoized value while useCallback returns a memoized callback. A use case for useCallback is when you need to pass a function(or callback) as a prop to a child component. Instead of having React send a new function each render, this optimization technique makes it so that a new function is only passed if one of the dependencies in the dependency array changes.
useCallback returns its function uncalled so you can use it later while useMemo calls its function and returns a value.
For example, take a parent component that gets rerendered often, and a child component that takes a function as one of its props. With every render, the child prop will re-execute this function unnecessarily. However, passing the function to useCallback along with an array of dependencies saves the unnecessary computation, only recomputing when necessary and returning the cached function otherwise.
import React, { useCallback } from 'react';import useSearch from './fetch-items';function Parent({ term }) {
const handleClick = useCallback((item) => {
console.log('You clicked ', item);
}, [term]); const items = useSearch(term); return (
/** BigList renders a long list of items.
* We don't want to rerender that list everytime
*/ Parent rerenders.
<BigList
items={items}
handleClick={handleClick}
/>
);
}
Conclusion
Use useMemo (and useCallback) as an optimization technique to compute expensive operations in bigger applications. Use useMemo for big, expensive processing and useCallback to cache callbacks to prevent unnecessary component re-rending.
