useMemo in React

From the React Hooks cheat sheet · Performance · verified Jul 2026

useMemo

Memoize expensive calculations

javascript
// Memoize expensive calculation
const expensiveValue = useMemo(() => {
  return items.reduce((sum, item) => sum + item.value, 0)
}, [items])                             // Recalculate when items change

// Memoize object/array to prevent re-renders
const options = useMemo(() => ({
  color: 'blue',
  size: 'large'
}), [])                                 // Create once
💡 Only use for expensive operations
⚡ React 19's compiler auto-memoizes - often unnecessary now
⚠️ Don't overuse - adds complexity
✅ Great for: sorting, filtering, calculations

More React tasks

Back to the full React Hooks cheat sheet