Component Composition

intermediate2 min read

React

Building complex UIs by combining small, focused components — including passing JSX through the children prop — rather than through inheritance.

Prerequisites

React components and props (see Related Topics)

What you'll understand

What component composition means
How the children prop lets components wrap arbitrary content
Why React favours composition over inheritance

Explanation

Component composition is the practice of building a complex interface out of smaller, focused components, combining them rather than writing one large component. It is the natural extension of everything about components and props (see Related Topics): each piece does one job, and you assemble the pieces into something bigger.

A key enabler is the children prop. When you nest content inside a component tag, React passes that content to the component as a special prop called children, which the component can render wherever it likes. This lets you build generic wrappers, a Card, a Modal, a Layout, that provide structure and styling while remaining agnostic about what goes inside them.

React deliberately favours composition over inheritance. Rather than extending a base component to specialise it, you compose components and pass content and behaviour as props and children. This keeps components flexible and reusable, and avoids the rigid hierarchies that inheritance tends to produce. When two components share logic rather than layout, you extract that logic (for example into a custom hook) instead of a shared base class.

Examples

A generic Card renders whatever you nest inside it through the children prop:

function Card({ children }: { children: React.ReactNode }) {
  return <div className="card">{children}</div>;
}

Callers compose their own content inside the reusable wrapper:

<Card>
  <h2>Ada Lovelace</h2>
  <p>First programmer</p>
</Card>

Common mistakes

Building one enormous component instead of composing smaller ones.
Reaching for inheritance to share UI, which React does not favour.
Forgetting to render the children prop inside a wrapper component.
Over-configuring a component with many props when nesting children would be simpler.

Best practices

Compose small, single-purpose components into larger ones.
Use the children prop for flexible wrapper and layout components.
Prefer composition over inheritance to share structure.
Extract shared logic into custom hooks rather than base components.