React Memo

React.memo: Caching Component Output Across Renders

By default, when a parent component re-renders, React also re-renders every child inside it—even when a child's props stay identical. React.memo is a higher-order wrapper that skips re-rendering a child component if its props pass a shallow equality check.

How Shallow Comparison Works

When you wrap a component in memo(), React compares each prop from the previous render against the new render using Object.is. Primitive props (string, number, boolean) match by value, whereas objects, arrays, and functions match only by memory reference.

import { memo, useState } from 'react';

const MetricTile = memo(function MetricTile({ label, value }) {
  console.log('Rendering MetricTile:', label);
  return (
    <div className="tile">
      <span>{label}</span>
      <strong>{value}</strong>
    </div>
  );
});

export function AnalyticsBoard() {
  const [note, setNote] = useState('');

  return (
    <section>
      <input
        value={note}
        onChange={(e) => setNote(e.target.value)}
        placeholder="Filter note..."
      />
      <MetricTile label="Active Users" value={1420} />
    </section>
  );
}

Typing inside the input updates AnalyticsBoard, yet MetricTile skips re-rendering because "Active Users" and 1420 did not change.

Common Memoization Mistakes

• Breaking memo with Inline Objects or Callbacks: Passing style={{ padding: 8 }} or onSave={() => save()} creates a fresh reference on every parent render, defeating memo completely unless stabilized with useMemo or useCallback.
• Wrapping Tiny Components Everywhere: Shallow prop checks carry their own CPU cost. Only wrap components that render large trees or run slow calculations on frequent parent updates.
• Overlooking Composition First: Moving rapidly changing state down into its own leaf component (or passing static JSX via children) often avoids unnecessary renders without needing memo at all.

Frequently Asked Questions

Does React.memo block internal state updates inside the wrapped component?

No. If the memoized component updates its own useState or consumes a changed useContext, it still re-renders normally.

Can I provide a custom comparison function to memo?

Yes. Pass (prevProps, nextProps) => boolean as the second argument, returning true when props are equal and rendering should be skipped.

Will I still need React.memo with the React Compiler?

React 19's React Compiler automatically memoizes components and values at build time, reducing the need for manual memo, useMemo, and useCallback wrappers.