API · Components
memo
Skip the render
memo() wraps a component so React compares its props with the previous ones. If nothing changed by reference, the render is skipped. It's the piece that makes useCallback and useMemo worthwhile.
The comparison
By default, shallow comparison: === on each prop. That's why passing a new object literal on every render breaks memoization. Pass primitives, or stabilize references with useMemo/useCallback.
When you don't want it
If the component is trivial or its props change on almost every render, comparing is more expensive than rendering. Save memo for expensive subtrees or long lists.
Common pitfalls
- 01memo compares by reference: if the parent passes a new object or function on every render, memo won't help.
- 02memo is not a silver bullet: if the props change frequently, the comparison overhead is pure cost.
- 03Don't add memo prematurely. Profile first, then wrap what the Profiler identifies as expensive.
Was this helpful?
Sign in to give feedback