The useMemo hook memoizes expensive computations to avoid recalculating on every render. Here's when and how to use it effectively.
Basic Usage
Loading code block...
Expensive Calculations
Loading code block...
Filtering and Sorting
Loading code block...
Derived State
Loading code block...
Object/Array Stability
Loading code block...
Complex Data Transformations
Loading code block...
Search Index
Loading code block...
Context Value Memoization
Loading code block...
Lazy Computation
Loading code block...
When NOT to Use useMemo
Loading code block...
Best Practices
When to Use:
✓ Expensive calculations
✓ Complex data transformations
✓ Stable object/array references
✓ Context provider values
Indicators:
✓ Sorting/filtering large arrays
✓ Recursive calculations
✓ Parsing/formatting operations
✓ Building derived data structures
Performance:
✓ Profile before optimizing
✓ Keep dependency arrays minimal
✓ Consider computation cost vs memory
✓ Test with realistic data sizes
Avoid:
✗ Trivial calculations
✗ Primitive values
✗ Constantly changing dependencies
✗ Premature optimization
Conclusion
useMemo memoizes expensive computations to avoid recalculating on every render. Use it for expensive operations like sorting large arrays, complex data transformations, or creating stable object references for memoized children. Avoid using it for cheap calculations where the memoization overhead exceeds the computation cost. Always profile first and optimize based on actual performance needs.