React Component Composition

What is Component Composition in React?

Composition means building complex UIs by nesting simple components and passing content through props, rather than by extending a base component. React has no inheritance model for components — composition is the whole design.

Why Component Composition matters

Composition keeps components small and independently testable, and it avoids the deep, brittle hierarchies that class inheritance produces in other frameworks.

Component Composition example

function Dialog({ title, children, footer }) {
  return (
    <div className="dialog">
      <h2>{title}</h2>
      <div>{children}</div>
      <footer>{footer}</footer>
    </div>
  );
}

function ConfirmDialog({ onConfirm }) {
  return (
    <Dialog
      title="Withdraw application?"
      footer={<button onClick={onConfirm}>Yes, withdraw</button>}
    >
      <p>This cannot be undone.</p>
    </Dialog>
  );
}

How this works

ConfirmDialog does not extend Dialog; it renders one and fills its slots. Any number of specialised dialogs can be built the same way without touching Dialog itself.

Key points to remember

• Prefer composition over inheritance — the React team recommends never using component inheritance.
• Pass elements as props to create named slots.
• Extract non-visual logic into custom hooks rather than base components.

Common mistakes with Component Composition

• Building a "base component" other components extend — this fights the model.
• Creating one component with fifteen boolean props instead of several composed components.