React.memo and Shallow Comparison

The Gatekeeper Component

React.memo adds a check before rendering: "Are the new props the same as the old props?" If yes, skip the render entirely. If no, render normally.

// Without memo: renders every time Parent renders
function ExpensiveList({ items, onSelect }) {
  console.log('ExpensiveList rendered');
  return items.map(item => (
    <div key={item.id} onClick={() => onSelect(item.id)}>
      {heavyComputation(item)}
    </div>
  ));
}

// With memo: only renders when items or onSelect actually change
const MemoizedList = memo(function ExpensiveList({ items, onSelect }) {
  console.log('ExpensiveList rendered');
  return items.map(item => (
    <div key={item.id} onClick={() => onSelect(item.id)}>
      {heavyComputation(item)}
    </div>
  ));
});

The Mental Model

How Shallow Comparison Works

React.memo uses Object.is to compare each prop:

// React.memo's comparison (simplified)
function shallowEqual(prevProps, nextProps) {
  const prevKeys = Object.keys(prevProps);
  const nextKeys = Object.keys(nextProps);

  if (prevKeys.length !== nextKeys.length) return false;

  for (const key of prevKeys) {
    if (!Object.is(prevProps[key], nextProps[key])) {
      return false;  // Different value → re-render
    }
  }
  return true;  // All same → skip render
}

The critical point: shallow comparison checks references, not values. Two objects with identical contents are "different" if they're different instances.

When memo Helps

React.memo is beneficial when ALL of these are true:

1. The component re-renders frequently (parent updates often)
2. The component's props rarely change (most re-renders are unnecessary)
3. The component is expensive to render (heavy computation, large subtree)

// GOOD use of memo: expensive component, stable props, frequent parent renders
const ChartWidget = memo(function ChartWidget({ data, config }) {
  // Expensive: parses data, computes SVG paths, renders hundreds of elements
  const paths = computeChartPaths(data); // Heavy
  return (
    <svg>
      {paths.map(p => <path key={p.id} d={p.d} stroke={p.color} />)}
    </svg>
  );
});

function Dashboard() {
  const [time, setTime] = useState(Date.now());
  const chartData = useChartData(); // Stable reference (from external store)

  useEffect(() => {
    const id = setInterval(() => setTime(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <>
      <Clock time={time} />  {/* Updates every second */}
      <ChartWidget data={chartData} config={chartConfig} />  {/* memo skips re-render */}
    </>
  );
}

Without memo, ChartWidget re-renders every second (because Dashboard re-renders for the clock). With memo, it only re-renders when chartData or chartConfig changes.

When memo Doesn't Help (or Hurts)

// WASTEFUL: props change every render anyway
const UserCard = memo(function UserCard({ user, onClick }) {
  return <div onClick={onClick}>{user.name}</div>;
});

function UserList({ users }) {
  return users.map(user => (
    <UserCard
      key={user.id}
      user={user}
      onClick={() => selectUser(user.id)}  // New function every render!
    />
  ));
}

The onClick prop is a new function reference every render. Memo compares it: Object.is(oldFn, newFn) → false. The component re-renders anyway. The memo wrapper added overhead (the comparison) with zero benefit.

// 1. Inline objects
<Child style={{ color: 'red' }} />  // New object every render

// 2. Inline functions
<Child onClick={() => handleClick(id)} /> // New function every render

// 3. Spread props
<Child {...computeProps()} />  // New object every render

// 4. Children as props
<Child><GrandChild /></Child>  // Children are a new React element every render

Custom Comparison Functions

React.memo accepts a custom comparison function:

const UserAvatar = memo(
  function UserAvatar({ user, size }) {
    return <img src={user.avatarUrl} width={size} height={size} alt={user.name} />;
  },
  // Custom comparison: only re-render if avatarUrl or size changed
  (prevProps, nextProps) => {
    return (
      prevProps.user.avatarUrl === nextProps.user.avatarUrl &&
      prevProps.size === nextProps.size
    );
  }
);

The custom comparator returns true to SKIP rendering (props are the same) and false to RE-RENDER (props differ). Note: this is the opposite of shouldComponentUpdate.

Production Scenario: memo That Made Things Worse

A team wraps every component in React.memo "for performance." The result:

// Team adds memo to EVERY component
const Button = memo(function Button({ children, onClick, variant }) { ... });
const Text = memo(function Text({ children, size, color }) { ... });
const Icon = memo(function Icon({ name, size }) { ... });
const Flex = memo(function Flex({ children, gap, direction }) { ... });

// Usage in a form — EVERY prop is new every render
function LoginForm() {
  const [email, setEmail] = useState('');

  return (
    <Flex direction="column" gap={16}>  {/* children change → re-render anyway */}
      <Text size="lg" color="primary">Login</Text>  {/* No savings — just overhead */}
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <Button
        onClick={() => login(email)}  {/* New function → re-render */}
        variant="primary"
      >
        <Icon name="login" size={16} />  {/* children change → re-render */}
        Submit
      </Button>
    </Flex>
  );
}

Every component has memo, but almost every prop is a new reference each render (inline functions, children elements, inline objects). Memo checks props (cost), finds they're different (always), and renders anyway (same cost as without memo). Net result: slower than no memo, because the comparison overhead adds up.

The fix: remove memo from small/cheap components. Add it only to demonstrably expensive ones after profiling.

Common Mistakes

Challenge

Challenge: Will memo prevent the re-render?

const ExpensiveChart = memo(function ExpensiveChart({ data, config, onHover }) {
  // ... renders a complex SVG chart
});

function Dashboard() {
  const [count, setCount] = useState(0);
  const data = useMemo(() => processData(rawData), [rawData]);
  const config = { theme: 'dark', animate: true };

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <ExpensiveChart
        data=`{data}`
        config=`{config}`
        onHover={(point) => console.log(point)}
      />
    </>
  );
}

// When the user clicks the button, does ExpensiveChart re-render?
// If yes, which prop(s) cause it? How would you fix it?

function Dashboard() {
  const [count, setCount] = useState(0);
  const data = useMemo(() => processData(rawData), [rawData]);
  const config = useMemo(() => ({ theme: 'dark', animate: true }), []);
  const onHover = useCallback((point) => console.log(point), []);

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <ExpensiveChart data={data} config={config} onHover={onHover} />
    </>
  );
}

Quiz

Key Rules