What is the composition pattern in React?

Composition means building a complex component out of smaller ones you pass in, rather than out of props and conditionals inside one component. In React the main tool is children.

// configuration: every new case needs a new prop
<Card title="Hi" showFooter footerText="Bye" variant="warning" />

// composition: the caller supplies the parts
<Card>
  <Card.Header>Hi</Card.Header>
  <Card.Body>...</Card.Body>
  <Card.Footer>Bye</Card.Footer>
</Card>

The second version does not grow a prop every time a designer asks for something new.

The shapes it takes

children for the generic container. A Modal, Layout, or Card does not need to know what is inside it:

function Modal({ children, onClose }) {
  return <div className="overlay" onClick={onClose}>{children}</div>;
}

Named slots when there are several holes to fill — just props that happen to take elements:

<Page sidebar={<Nav />} header={<Search />}>{content}</Page>

Compound components for a group that shares implicit state through context — Tabs with Tabs.List and Tabs.Panel, where the caller controls the markup and the parent controls which panel shows.

Render props / a function as children when the child needs data from the parent:

<DataLoader url="/api/users">
  {({ data, loading }) => loading ? <Spinner /> : <List items={data} />}
</DataLoader>

Hooks have replaced most render-prop use, because a hook shares logic without adding a layer to the tree. Reach for a render prop when what varies is markup in a particular position, not just logic.

Why React prefers this to inheritance

The React docs are explicit that they have found no case where class inheritance of components beat composition. Inheritance couples a child to a parent's internals and only allows one; composition lets you combine as many pieces as you like at the call site.

A side effect worth knowing

Passing children from above means the element is created by the parent, so it does not re-render when the wrapper's own state changes. That makes "lift the expensive child into children" a real optimisation, not just a style choice.

When it goes too far

Ten tiny components that are never used apart, or four levels of wrapper to render one button, is worse than a component with four props. Composition earns its keep when the pieces are genuinely reused or genuinely vary.