What does React.memo cost, and why should you not use it by default on every component?

Short answer

React.memo adds a Shallow Compare of every prop on each render; if props always change or the component is simple, that comparison is extra work without benefit.

Explanation

React.memo compares prevProps and nextProps with Object.is. If a component always receives new objects or unstable functions, or consumes rapidly changing values, the shallow comparison adds to rendering cost instead of saving it. Reserve memo for computationally heavy components or ones that often return the same output.

Code example

// No need to use memo here because the component is small
function SimpleBadge({ label }: { label: string }) {
  return <span className="badge">{label}</span>;
}

// Proper use of memo for a heavy component that rerenders while its props
export const HeavyTable = React.memo(function HeavyTable({ rows }: { rows: Row[] }) {
  return <table>{/* Thousands of calculations */}</table>;
});

Common mistakes

• Wrapping a component in React.memo while passing a new object or inline callback such as onClick={() => doSomething()} without useCallback.

Follow-up questions

• How do useMemo and useCallback differ, and when can they harm performance?
• How do you avoid creating new objects and references (Inline Objects & Arrays) in a component body during Render?

Sources

• React docs — memo