What React memo does
By default a React component re renders whenever its parent re renders, even if its own props are identical. React memo wraps a function component so React can skip the render when props are shallowly equal to the previous render.
- memo compares the previous and next props with a shallow equality check
- If every prop is the same reference or value, the component is not re rendered
- A component that renders the same output for the same props is called pure
When it helps and when it does not
memo only pays off when a component renders often and its props rarely change. If props change every render, the comparison itself adds cost with no benefit.
- Object and function props break memo unless their reference is stable
- You can pass a custom comparison function as the second argument
- Do not wrap every component blindly, profile first
Render decision
Key idea
Wrap a frequently rendered component in memo so React can reuse its last output when props are unchanged, but keep prop references stable or the memo is useless.