React.memo

🔍 What Is It?

React.memo(Component) is a higher-order component that memoises the rendered output. On re-render, React compares the new props to the previous props using shallow equality. If all props are the same, the previous render output is reused.

const ExpensiveChart = React.memo(function Chart({ data, config }: ChartProps) {
  // expensive rendering logic
  return <canvas ref={canvasRef} />;
});

Custom comparison:

React.memo(Component, (prevProps, nextProps) => prevProps.id === nextProps.id)

Return true to skip re-render, false to re-render.

🎯 Why Do We Need It?

In React, a parent re-render always causes all children to re-render by default. For most components, this is fine — rendering is fast. But for:

• →Components that render large lists
• →Components with expensive calculations in the render
• →Components that integrate with third-party libraries (charts, maps, editors)
• →Components deep in the tree that receive stable props

...the default behaviour wastes CPU. React.memo prevents these re-renders when props haven't changed.

🏗️ What Happens in Real Projects?

In a financial dashboard:

• →A <LineChart /> component that renders 1,000 data points — memoised so it only re-renders when the chart data changes, not when the sidebar toggles
• →<PolicyRow /> in a list of 500 policies — memoised so selecting one row does not re-render all others
• →A <RichTextEditor /> — memoised to prevent re-initialising the editor on every parent render

⚙️ How It Works

React.memo adds a shallow equality check before rendering. Shallow equality means:

• →Primitives (string, number, boolean): compared by value — 'Alice' === 'Alice' ✓
• →Objects and arrays: compared by reference — {} === {} is false even if they look the same
• →Functions: compared by reference — () => {} === () => {} is false

This is why React.memo only works correctly when paired with:

• →useMemo for object/array props
• →useCallback for function props

💻 Example

React.memo with useCallback and useMemo — Memoised list rows with stable callback and object props.

interface PolicyRowProps {
  policy: Policy;
  isSelected: boolean;
  onSelect: (id: string) => void;
  onDelete: (id: string) => void;
}

// Memoised: only re-renders when its own props change
const PolicyRow = React.memo(function PolicyRow({
  policy,
  isSelected,
  onSelect,
  onDelete,
}: PolicyRowProps) {
  console.log('PolicyRow render:', policy.id); // use to verify memoisation

  return (
    <tr className={isSelected ? 'row--selected' : ''}>
      <td>{policy.policyNumber}</td>
      <td>{policy.holderName}</td>
      <td><StatusBadge status={policy.status} /></td>
      <td>
        <button onClick={() => onSelect(policy.id)}>Select</button>
        <button onClick={() => onDelete(policy.id)}>Delete</button>
      </td>
    </tr>
  );
});

// Parent — stable callbacks prevent PolicyRow re-renders
function PolicyTable({ policies }: { policies: Policy[] }) {
  const [selectedId, setSelectedId] = useState<string | null>(null);

  // Without useCallback: new function every render — all rows re-render
  const handleSelect = useCallback((id: string) => setSelectedId(id), []);
  const handleDelete = useCallback(async (id: string) => {
    await deletePolicy(id);
  }, []);

  return (
    <table>
      <tbody>
        {policies.map(p => (
          <PolicyRow
            key={p.id}
            policy={p}
            isSelected={selectedId === p.id}
            onSelect={handleSelect}
            onDelete={handleDelete}
          />
        ))}
      </tbody>
    </table>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits