React.memo Guide

React.memo is a higher-order component that memoizes functional components, preventing unnecessary re-renders when props haven't changed.

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

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.

React.memo Guide

Basic Usage#

How memo Works#

Custom Comparison Function#

Common Pitfalls#

Memoizing with Callbacks#

When to Use memo#

Nested Memoization#

Debugging Memoization#

Best Practices#

Conclusion#

Share this article

Related articles

React Rendering Performance: Optimization Guide

React Performance Optimization Techniques

React Performance Profiling Guide