Frontend Beauty
ESC

Type to search the knowledge base.

React.memo

React.memo skips re-renders when props are Object.is-equal: when it helps, when unstable props make it useless, and cost.

intermediate4 min read
  • react
  • react-memo

React.memo wraps a component so React skips re-rendering it when the new props are shallowly equal to the previous props (Object.is on each prop). It is a performance optimization, not a correctness tool, and not a default costume for every component.

const Row = memo(function Row({ item, onSelect }) {
  return (
    <button type="button" onClick={() => onSelect(item.id)}>
      {item.label}
    </button>
  );
});

Docs: React.memo, Skipping Re-rendering.

When memo actually helps

Parent re-renders often (high-frequency state: mouse, scroll, typing) and a heavy child receives props that usually stay the same:

function Dashboard({ filter }) {
  const [tick, setTick] = useState(0);
  // tick updates every second — do not redraw the huge table for free
  return (
    <>
      <clock onClick={() => setTick((t) => t + 1)}>{tick}</clock>
      <HeavyTable filter={filter} />
    </>
  );
}

const HeavyTable = memo(function HeavyTable({ filter }) {
  // expensive render
  return <Table rows={compute(filter)} />;
});

Without memo, HeavyTable re-renders every tick even if filter is unchanged.

Unstable props destroy memo

// New function every parent render → memo always sees prop change
<Row item={item} onSelect={() => select(item.id)} />

// New object every render
<Chart style={{ color: 'red' }} />

Fixes: stable callbacks via useCallback when they are deps/memo props, lift style objects, or pass primitives. Measure first — useCallback everywhere is cargo cult.

const onSelect = useCallback((id) => {
  dispatch({ type: 'select', id });
}, []);

Custom comparison is possible as a second argument to memo, but easy to get wrong and usually unnecessary.

What memo does not do

  • Does not deep-compare props.
  • Does not block context-driven re-renders when the component reads that context.
  • Does not replace fixing state placement or splitting context.
  • Does not make a cheap component faster — comparison has a cost.

Children still re-render if their own state or context changes.

memo versus useMemo versus useCallback

API Skips
memo(Component) Re-rendering the component when props equal
useMemo(() => v, deps) Recomputing a value
useCallback(fn, deps) Recreating a function reference

They compose: memoized child + stable callback props.

Interview out-loud

“React.memo shallow-compares props and skips render when they are equal. It helps for expensive pure children under chatty parents. Inline objects and functions defeat it. I profile before wrapping trees in memo, and I fix state colocation first.”

Further reading

Production checklist

Before you ship a change in this area, walk the list out loud:

  1. What is the source of truth for the data on screen?
  2. What happens on remount, route change, and Strict Mode double-invoke?
  3. Which updates are urgent (input) versus deferrable (filter large lists)?
  4. Did you profile before adding memo, context splits, or virtualization?
  5. Is there an accessibility path: keyboard, focus, names, and errors?

If you cannot answer those, the API knowledge will not save the interview or the incident.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides