React.memo is a higher-order component that memoizes functional components, preventing unnecessary re-renders when props haven't changed.
Basic Usage
Loading code block...
How memo Works
Loading code block...
Custom Comparison Function
Loading code block...
Common Pitfalls
Loading code block...
Memoizing with Callbacks
Loading code block...
When to Use memo
Loading code block...
Nested Memoization
Loading code block...
Debugging Memoization
Loading code block...
Best Practices
When to Memoize:
✓ Expensive rendering
✓ Frequent parent re-renders
✓ Stable props (primitives, memoized values)
✓ Part of a list with many items
Props Stability:
✓ Use useMemo for objects/arrays
✓ Use useCallback for functions
✓ Extract constants outside component
✓ Pass primitives when possible
Custom Comparison:
✓ Only when default comparison fails
✓ Keep comparison fast
✓ Avoid deep comparison for large objects
✓ Document why custom comparison is needed
Avoid:
✗ Memoizing everything
✗ New objects/functions in props
✗ Ignoring context changes
✗ Complex comparison functions
Conclusion
React.memo prevents unnecessary re-renders by memoizing functional components. It performs shallow prop comparison by default, so ensure object and function props have stable references using useMemo and useCallback. Use memo when components are expensive to render or have stable props while parents re-render frequently. Avoid over-optimization - profile first, then memoize where it matters.