Introduction
In modern React applications, performance matters. While React efficiently manages re-renders, complex or expensive computations inside components can cause lags, dropped frames, or unnecessary reprocessing.
This is where the useMemo hook becomes essential.
useMemo() helps developers prevent unnecessary recalculations by memoising the return value of a function. In short: it lets you cache expensive computations between renders, only recalculating when necessary.
In this guide, you’ll learn:
- What useMemo does
- How to use it properly
- When (and when not) to use it
- Common use cases and real code examples
- Performance tips and best practices
What is useMemo?
useMemo is a built-in React hook that returns a memoised value. It helps avoid recalculating a result unless the dependencies change.
Syntax:
const memoizedValue = useMemo(() => {
return computeExpensiveValue(input);
}, [input]);- The function is only re-executed when one of the dependencies changes.
- Otherwise, React reuses the cached result.
Why Use useMemo?
In React, any time a component re-renders, all the code inside its body re-runs, including function calls and computations.
This is fine for most logic. But when you have expensive calculations (sorting, filtering, transformations), they can slow your app down.
useMemo solves this by caching the result and skipping the recalculation unless needed.
Example: Sorting a List
Let’s say you’re sorting a large array on every render:
const sortedList = list.sort((a, b) => a - b);This will run every time your component renders, even if list hasn’t changed.
Optimised with useMemo:
const sortedList = useMemo(() => {
return [...list].sort((a, b) => a - b);
}, [list]);Now, the sort only runs when list changes, improving performance.
When Should You Use useMemo?
Use it when:
- You have expensive calculations
- You want to memoise derived state
- You're passing computed props to memoised child components
- You want to optimise large data structures
Avoid it when:
- The logic is lightweight or simple
- You don’t gain noticeable performance benefits
- Your dependencies change on every render
Remember: Memoisation itself has overhead. Don’t use useMemo “just in case.” Profile first.
useMemo vs useCallback
Developers often confuse useMemo with useCallback. Here's the difference:
Example: Filtering a List
const filteredItems = useMemo(() => {
return items.filter(item => item.active);
}, [items]);This will only re-run the filter if items changes.
Example: Avoiding Expensive Math
const heavyCalc = useMemo(() => {
let result = 0;
for (let i = 0; i < 1e7; i++) {
result += Math.random();
}
return result;
}, []);Without useMemo, this runs on every render. With it, it runs only once (because the dependency array is empty).
Common useMemo Mistakes
1. Using it for everything
If the function is fast and cheap, don’t memoise it.
2. Missing or incorrect dependencies
Always include all referenced variables in the dependency array. Otherwise, you'll get stale values.
3. Assuming useMemo always improves performance
Memoisation has overhead. It only helps when the cost of recalculating is higher than the cost of caching.
Best Practices for useMemo
- Use for real performance gains, not just style
- Wrap only expensive operations
- Keep the dependency array accurate
- Use React DevTools to inspect performance before optimising
- Pair with React.memo and useCallback for full optimisation
When to Combine useMemo with React.memo
If you're passing computed props into a memoised child component (via React.memo), useMemo ensures the child doesn't re-render unless necessary.
Example:
const filtered = useMemo(() => {
return items.filter(i => i.active);
}, [items]);
<MemoizedList data={filtered} />Summary: useMemo Hook in React
React’s useMemo is a powerful optimisation tool, when used correctly.
Key Takeaways:
- It memoises return values, skipping re-computation unless needed
- It helps improve performance for expensive logic
- Don’t overuse it; memoisation comes with a cost