Introduction
This useMemo and useCallback hooks use a programming technique called memoization to optimize performance in React applications.
In this article, you will learn about memoization. And also how to use useMemo and useCallback.
What is memoization?
In simple terms, memoization is a technique that allows you "remember" computed data. With memoization, there is no need to recalculate previously computed data.
Instead of rerunning the function or performing the same computation whenever you need the data, you store it in a cache (temporary storage). And retrieve it when you need to use the data again.
Memoization is a technique you can use to optimize the performance of your application.
Memoization in React
The reason you may consider using memoization in React is to avoid unnecessary rerendering of components.
In React applications, anytime a component renders, all the logic in the component is re-computed. In most cases, React is fast enough to handle these renders without problems.
However, for those rare cases where you might need to, it's good to have these memoization techniques in your toolbelt as a React developer.
The useMemo hook
The syntax for useMemo is similar to useEffect. They both take two arguments - a function and a dependency array.
const cachedData = useMemo(function, dependencyArray)
The first argument is a function whose return value you want to memoize. And the second argument is an array of dependencies. The function passed to useMemo will only run when any of the dependencies change.
Use case for useMemo
A use case for the useMemo hook is skipping expensive recalculations.
Remember how React recalculates all of a component's logic on every render. If your component contains some expensive operation, then React will run that operation after every render.
useMemo allows you to run that operation only once, then cache(or store) the value. That way, you can access the memoized value after later rerenders without performing the expensive operation again.
const cachedData = useMemo(() => {
return expensiveCalculation(param1, param2)
}, [param1, param2])
Okay, but how can you tell if a calculation is expensive? Here is what the React Docs has to say.
"In general, unless you’re creating or looping over thousands of objects, it’s probably not expensive." -React Docs.
The useCallback hook
The useCallback hook works like useMemo. But unlike useMemo, it returns a memoized callback function instead of a memoized value.
const cachedData = useCallback(function, dependencyArray)
The syntax is similar to useMemo. useCallback takes two arguments - a function and a dependency array.
const cachedData = useCallback(
() => myCallback(param1, param2), // callback function
[param1, param2] // dependency array
)
Conclusion
The useMemo and useCallback hooks are meant to optimize performance in React applications. However, they have their trade-offs. I will end this article with a quote from Kent C. Dodds.
"Performance optimizations are not free. They ALWAYS come with a cost but do NOT always come with a benefit to offset that cost. Therefore, optimize responsibly."- Kent C. Dodds