useMemo Hook
useMemo is React remembering the answer to a hard math problem so it doesn't have to redo the whole calculation every single time.
In this page:
Syntax
const memoizedValue = useMemo(() => {
return expensiveCalculation(dependency);
}, [dependency]);Memoizing an Expensive Calculation
useMemo(calculateValue, dependencies) runs calculateValue and caches its result. On future renders, if the dependencies haven't changed, React reuses the cached result instead of recalculating it, saving the cost of an expensive computation.
Note:
Reach for useMemo specifically when a calculation is measurably slow -- not as a default habit for every derived value.
Warning:
useMemo still runs the calculation once per unique set of dependencies -- it doesn't make the first calculation free, only subsequent identical ones.
Example: Memoizing an Expensive Calculation
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function ExpensiveList({ items }) {
const sorted = React.useMemo(() => {
console.log("Sorting...");
return [...items].sort();
}, [items]);
return <ul>{sorted.map((item, i) => <li key={i}>{item}</li>)}</ul>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<ExpensiveList items={["banana", "apple", "cherry"]} />);
</script>
</body>
</html>How the Dependency Array Controls Recalculation
Just like useEffect, useMemo takes a dependency array as its second argument. React compares each dependency to its previous value, and only re-runs the calculation function if at least one of them has changed since the last render.
Note:
List every value the calculation function actually reads, the same way you would for useEffect's dependency array.
Warning:
An empty dependency array
[] means the value is only ever calculated once, which is wrong if the calculation depends on props or state that can change.Example: How the Dependency Array Controls Recalculation
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function PriceCalculator({ quantity, price }) {
const total = React.useMemo(() => {
console.log("Recalculating total...");
return quantity * price;
}, [quantity, price]);
return <p>Total: ${total}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<PriceCalculator quantity={3} price={9.99} />);
</script>
</body>
</html>When NOT to Use useMemo
For cheap calculations -- simple arithmetic, short string formatting -- the overhead of useMemo's own bookkeeping can outweigh any benefit. useMemo is a targeted optimization tool for genuinely expensive work, not a default wrapper for every derived value.
Note:
If you're unsure whether a calculation is 'expensive enough' to memoize, it usually isn't -- add useMemo only once you've noticed an actual performance problem.
Warning:
Wrapping trivial calculations in useMemo everywhere makes code harder to read without any measurable performance gain.
Example: When NOT to Use useMemo
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function SimpleGreeting({ name }) {
// No useMemo needed here -- this is trivially cheap
const greeting = `Hello, ${name}!`;
return <p>{greeting}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<SimpleGreeting name="Sam" />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Wrapping every single calculation in useMemo, even cheap ones, adding overhead without real benefit.
- Forgetting to list a value used inside the memoized calculation in the dependency array.
- Expecting useMemo to prevent a component from re-rendering -- it only memoizes a calculated VALUE, not the render itself.
Chapter Summary
- useMemo caches the result of an expensive calculation between renders.
- It only recalculates when one of its listed dependencies changes.
- It's meant for genuinely expensive computations, not for optimizing everything by default.
- Overusing useMemo can add complexity without meaningful performance benefit.
Browser Support
Available since React 16.8, when Hooks were introduced.
🔒
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: