React.memo

React.memo wraps a component and skips re-rendering if props are shallowly equal to the previous render. Useful for expensive pure components receiving stable props.

Memoized Components

const MemoRow = React.memo(Row) prevents Row from re-rendering when parent re-renders but Row's props are unchanged (shallow compare).

Memo only helps when props are stable — inline objects/functions as props defeat memo unless parent uses useMemo/useCallback.

const ExpensiveChart = React.memo(function ExpensiveChart({ data, config }) {
  return <Chart data={data} config={config} />;
});

// Parent must pass stable references
const config = useMemo(() => ({ theme }), [theme]);
<ExpensiveChart data={data} config={config} />

Memo without stable props provides no benefit.

React.memo API

React.memo(Component)
React.memo(Component, (prev, next) => prev.id === next.id)

Default comparison is shallow prop equality.
Custom compare function returns true to skip re-render.
Does not prevent re-render when internal state/context changes.
Works on function components only.

Memo Decision Guide

When React.memo is worth applying.

Scenario	Use memo?
Expensive render, stable props	Yes
Simple cheap component	No
Props always new references	Fix props first
List item component	Often yes + stable callbacks
Always re-rendering due to context	Split context instead

Memoizing List Items

Extract list row to memoized component; stabilize onClick with useCallback keyed by item id or use item id inside stable handler pattern.

Verifying Memo Works

React DevTools "Highlight updates" shows which components re-render. Confirm memoized children stay dark when parent state unrelated to them changes.

Common Mistakes

Wrapping every component in memo.
Passing inline objects breaking memo.
Expecting memo to fix context re-render storms.
Custom compare function with wrong return logic.

Key Takeaways

React.memo skips render on shallow-equal props.
Pair with stable props from useMemo/useCallback.
Profile first — memo has comparison overhead.
Split context when unrelated state triggers re-renders.

Pro Tip

If memo doesn't help, the problem is usually unstable props or context — fix upstream, not more memo layers.