JAVASCRIPT
Optimize Performance with useMemo for Expensive Calculations
Learn how to use React's useMemo hook to memoize the result of expensive calculations, preventing unnecessary re-renders and improving component performance.
import React, { useState, useMemo } from 'react';
function ExpensiveComponent({ items }) {
const [filter, setFilter] = useState('');
const filteredAndSortedItems = useMemo(() => {
console.log('Recalculating expensive operation...');
// Simulate an expensive calculation
return items
.filter(item => item.name.toLowerCase().includes(filter.toLowerCase()))
.sort((a, b) => a.name.localeCompare(b.name));
}, [items, filter]); // Dependencies array: recalculate only if items or filter changes
return (
<div>
<input
type="text"
placeholder="Filter items..."
value={filter}
onChange={(e) => setFilter(e.target.value)}
/>
<ul>
{filteredAndSortedItems.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}
// Example Usage:
// const data = Array.from({ length: 1000 }, (_, i) => ({ id: i, name: `Item ${i}` }));
// <ExpensiveComponent items={data} />
How it works: The `useMemo` hook memoizes the result of a function. In this example, `filteredAndSortedItems` will only be re-calculated if `items` or `filter` change. This prevents the expensive filtering and sorting operation from running on every single render when other state (not in dependencies) changes, significantly improving performance and efficiency.