useMemo memoizes expensive calculations, recomputing only when dependencies change. Here's how to use it effectively.
Basic Usage
Loading code block...
When to Use useMemo
Loading code block...
Dependencies
Loading code block...
useMemo vs useCallback
Loading code block...
Referential Equality
Loading code block...
Conditional Memoization
Loading code block...
Lazy Initialization
Loading code block...
Common Patterns
Loading code block...
When NOT to Use useMemo
Loading code block...
Debugging useMemo
Loading code block...
Best Practices
Use useMemo When:
✓ Expensive calculations
✓ Referential equality matters
✓ Preventing child re-renders
✓ Deriving complex state
Don't Use When:
✗ Simple calculations
✗ Primitive values
✗ Computation is cheap
✗ Value isn't used in renders
Dependencies:
✓ Include all values used inside
✓ Use specific properties, not objects
✓ Consider dependency stability
✓ Use ESLint exhaustive-deps rule
Performance:
✓ Profile before optimizing
✓ Measure actual impact
✓ Consider component structure
✓ Don't over-optimize
Conclusion
useMemo optimizes performance by memoizing expensive calculations and maintaining referential equality. Use it for computationally heavy operations, when passing objects/arrays to memoized children, or when deriving complex state. Always include all dependencies and profile your app to ensure memoization actually helps. Remember: premature optimization is the root of all evil - measure first, optimize second.