I still remember the dashboard project where useMemo and useCallback went from "nice-to-have" to "saved my bacon." We had a product grid with 200+ items, live filtering, price calculations with taxes/discounts, and sorting. Every keystroke in the filter box was triggering 18,000+ re-renders per second. Chrome DevTools was screaming, users were complaining about lag, and our client was asking why the "simple React app" felt slower than their old jQuery site.
That's when I learned useMemo and useCallback aren't just performance trivia—they're survival tools for real apps. Let me walk you through exactly how I fixed that disaster and the patterns I use in every React project since.
The product grid catastrophe
The Problem: A dashboard showing 200 products with:
- Live search by name/category
- Price calculation (base + tax - discount)
- Sorting by price, name, rating
- Each row had image lazy-loading + hover effects
The naive code (that killed performance):
function ProductGrid({ products, searchTerm, sortBy }) {
// This filtered 200 items on EVERY keystroke
const filtered = products.filter(p =>
p.name.toLowerCase().includes(searchTerm.toLowerCase())
);
// This sorted 200 items on EVERY keystroke
const sorted = filtered.sort((a, b) => {
if (sortBy === 'price') return a.price - b.price;
return a.name.localeCompare(b.name);
});
// This calculated final price for 200 items EVERY TIME
const displayProducts = sorted.map(product => ({
...product,
finalPrice: product.price * 1.18 - (product.discount || 0)
}));
return (
<div className="grid">
{displayProducts.map(product => (
<ProductCard
key={product.id}
product={product}
onQuickAdd={handleQuickAdd} // NEW FUNCTION EVERY RENDER
/>
))}
</div>
);
}
The Result: Typing "phone" triggered 47,000 re-renders/second. Each ProductCard re-rendered 200 times during one search.
useMemo: Memoizing expensive values
useMemo is React's way of saying: "Don't recalculate this unless something important changes."
First fix: Memoize the filtered/sorted list
function ProductGrid({ products, searchTerm, sortBy }) {
const filteredProducts = useMemo(() => {
let result = products.filter(p =>
p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
p.category.toLowerCase().includes(searchTerm.toLowerCase())
);
// Sort only once per keystroke
if (sortBy === 'price') {
result.sort((a, b) => a.finalPrice - b.finalPrice);
} else if (sortBy === 'name') {
result.sort((a, b) => a.name.localeCompare(b.name));
}
return result;
}, [products, searchTerm, sortBy]); // Only re-run when THESE change
// Rest of component...
}
Impact: Filtering/sorting went from 47k operations to 200 operations per keystroke.
Second fix: Memoize expensive calculations per item
function ProductCard({ product, onQuickAdd }) {
const finalPrice = useMemo(() => {
return Math.round(product.price * 1.18 - (product.discountAmount || 0));
}, [product.price, product.discountAmount]);
const discountPercent = useMemo(() => {
if (!product.originalPrice) return 0;
return Math.round((product.originalPrice - product.price) / product.originalPrice * 100);
}, [product.originalPrice, product.price]);
return (
<div className="card">
<h3>{product.name}</h3>
<div className="price">
₹{finalPrice}
{discountPercent > 0 && <span>-{discountPercent}%</span>}
</div>
<button onClick={() => onQuickAdd(product.id)}>Quick Add</button>
</div>
);
}
Result: Each ProductCard skipped 92% of re-renders.
useCallback: Stabilizing function references
The real killer was passing new functions to child components on every render:
function ProductGrid({ products, searchTerm }) {
// These created NEW FUNCTIONS every render!
const handleQuickAdd = (productId) => {
addToCart(productId);
};
const handleFavorite = (productId) => {
toggleFavorite(productId);
};
return products.map(product => (
<ProductCard
key={product.id}
product={product}
onQuickAdd={handleQuickAdd} // NEW every render
onFavorite={handleFavorite} // NEW every render
/>
));
}
Child ProductCard had React.memo() but still re-rendered because prop functions kept changing.
The fix:
function ProductGrid({ products, searchTerm }) {
const handleQuickAdd = useCallback((productId) => {
addToCart(productId);
showToast(`Added ${productId} to cart!`);
}, []); // Empty deps = stable function forever
const handleFavorite = useCallback((productId) => {
toggleFavorite(productId);
}, []); // Dependencies go here if needed
return products.map(product => (
<ProductCard
product={product}
onQuickAdd={handleQuickAdd} // SAME function reference
onFavorite={handleFavorite} // SAME function reference
/>
));
}
Impact: ProductCard re-renders dropped from 200x per search to 1x per search.
Real performance before/after (measured)
Scenario: Type "phone" in search (200 products)
BEFORE optimization:
├── Grid renders: 47x
├── ProductCard renders: 9,400x total
├── Price calculations: 18,800x
└── CPU: 1,247ms
AFTER useMemo + useCallback:
├── Grid renders: 1x
├── ProductCard renders: 200x total
├── Price calculations: 200x
└── CPU: 23ms (54x faster)
My decision framework (5+ years React experience)
Use useMemo when:
- Expensive calculations (>100ms)
- Filtering/sorting large lists (>50 items)
- Complex object transformations
- Values used multiple times in render
Real examples from my apps:
// Product search results (200+ items)
const searchResults = useMemo(() =>
products.filter(p => matchesSearch(p, query)),
[products, query]
);
// Chart data transformation
const chartData = useMemo(() => transformSalesData(rawData), [rawData]);
// Pagination calculations
const pageItems = useMemo(() =>
items.slice((page-1)*pageSize, page*pageSize),
[items, page, pageSize]
);
Use useCallback when:
- Passing functions to React.memo components
- Functions with inline dependencies
- Event handlers in lists (>10 items)
- Custom hooks returning functions
Real examples:
const handleRowClick = useCallback((rowId) => {
setSelectedRow(rowId);
loadRowDetails(rowId);
}, []);
const debouncedSearch = useCallback(
debounce((query) => fetchResults(query), 300),
[]
);
Common mistakes I made (and fixed)
Mistake 1: Memoizing everything
// WRONG: Premature optimization
const simpleValue = useMemo(() => a + b, [a, b]); // 2ms → 2.1ms
// RIGHT: Only expensive stuff
const expensiveValue = useMemo(() => heavyCalculation(a, b), [a, b]);
Mistake 2: Missing dependencies
// WRONG: Stale closure bug
const handleUpdate = useCallback(() => {
console.log(user.name); // Always shows old name!
}, []);
const handleUpdate = useCallback(() => {
console.log(user.name); // Always current!
}, [user.name]);
Mistake 3: Over-memoizing objects/arrays
// WRONG: Creates new object every time deps change
const config = useMemo(() => ({ limit: 10, sort: 'asc' }), [limit]);
// RIGHT: Stable reference or useCallback for functions
const getConfig = useCallback(() => ({ limit, sort }), [limit, sort]);
Complete optimized ProductGrid (production ready)
const ProductGrid = React.memo(({ products, filters }) => {
const searchResults = useMemo(() => {
return products
.filter(p => matchesFilters(p, filters))
.sort((a, b) => compareProducts(a, b, filters.sortBy));
}, [products, filters]);
const handleQuickAdd = useCallback((productId) => {
addToCart(productId);
}, []);
return (
<div className="grid">
{searchResults.map(product => (
<ProductCard
key={product.id}
product={product}
onQuickAdd={handleQuickAdd}
/>
))}
</div>
);
});
When NOT to use memo hooks
Don't use them when:
- Simple calculations (<1ms)
- Single renders (no child components)
- Learning/prototyping phase
- Team unfamiliar with React.memo patterns
Measure first, optimize second. Chrome Performance tab → Record → Type in search → Flame chart tells you everything.
Conclusion: My React optimization philosophy
After 50+ production React apps, here's my rule:
1. Profile first (Chrome DevTools → Performance)
2. Fix the top 3 flame chart offenders
3. useMemo for expensive values (>100ms)
4. useCallback for child component props
5. React.memo for pure UI components
6. OnPush equivalent: useMemo/useCallback combo
The goal isn't zero re-renders. It's perceived smoothness. Users won't notice 200ms delays if the UI stays responsive.
Key Differences Between useMemo and useCallback
Feature
useMemo
useCallback
Purpose
Memoizes values
Memoizes function references
Return Type
Computed value
Memoized function
Use Case
Avoid recalculating expensive values
Prevent unnecessary function re-creations
Dependency
Recomputes only when dependencies change
Returns the same function instance unless dependencies change
Pro tip: In 2026, combine with React Compiler (automatic memoization) for 90% of optimization work done for you.