Understanding useMemo
React components re-render often. By default, every variable and function inside a component is recreated on every render. useMemo lets you cache (memoize) a calculation between renders.
What is Memoization?
Memoization is an optimization technique used to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again. In React, useMemo is the built-in hook for this.
The Dependency Array
Just like useEffect, useMemo takes an array of dependencies. React will compare the current dependencies to the previous ones using Object.is. If they haven't changed, React skips calling the function and returns the cached value.
Premature Optimization
The useMemo hook itself has a performance cost (it has to allocate memory and run comparison checks). You should not wrap every single calculation in useMemo. Only use it for expensive loops, sorting large arrays, or preserving referential equality for child components wrapped in React.memo.
View Full Transcript+
This section contains the full detailed transcript of the performance optimization lessons. It covers the difference between value memoization (useMemo) and function memoization (useCallback), the concept of referential equality in JavaScript objects and arrays, and how to profile React components to find true bottlenecks before applying caching strategies.