useMemo memoizes a computed value; useCallback memoizes a function reference. Use them to avoid expensive recalculations or re-renders, but only when it actually helps.
What is the difference between useMemo() and useCallback()?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
OverviewuseMemo() and useCallback() help improve performance by caching results or function references between re-renders. React components re-render when their props or state change, and these hooks prevent expensive re-computations or re-creations that could slow the app down.
Hook | Purpose | Returns | Use Case |
|---|---|---|---|
useMemo() | Memoizes a computed value to avoid recalculating it every render. | A cached value. | When you have an expensive calculation that depends on specific values. |
useCallback() | Memoizes a function so it retains the same reference between renders. | A memoized function. | When passing callback props to child components to prevent unnecessary re-renders. |
JSX
// useMemo example
const total = useMemo(() => {
console.log('Calculating total...');
return items.reduce((sum, item) => sum + item.price, 0);
}, [items]);
// useCallback example
const handleClick = useCallback(() => {
console.log('Button clicked');
}, []);
Detailed Explanation
- useMemo() recalculates a value only when dependencies change. It’s ideal for optimizing expensive computations like filtering large datasets or formatting lists.
- useCallback() returns the same function reference between renders unless its dependencies change. It’s most useful when passing callbacks to memoized child components.
Performance Tip
Both hooks should be used selectively. Overusing them can make code complex without significant performance gain. They are primarily helpful in preventing unnecessary renders and optimizing heavy computations.
JSX
// Combined example
function ProductList({ products }) {
const [query, setQuery] = useState('');
const filteredProducts = useMemo(() => {
return products.filter((p) => p.name.toLowerCase().includes(query.toLowerCase()));
}, [products, query]);
const handleChange = useCallback((e) => {
setQuery(e.target.value);
}, []);
return (
<div>
<input value={query} onChange={handleChange} placeholder='Search products' />
<ul>{filteredProducts.map((p) => <li key={p.id}>{p.name}</li>)}</ul>
</div>
);
}
Analogy
useMemo() is like remembering the result of a long math calculation so you don’t recalculate it unless the inputs change. useCallback() is like remembering the function you used to do the calculation so you don’t create it again each time.
useMemo() optimizes values, useCallback() optimizes functions — both help React skip unnecessary work and maintain stable references.
Summary
useMemo()caches computed values.useCallback()caches function definitions.- Both improve performance by avoiding redundant work and reducing re-renders.
Similar questions
Guides