What is component composition?

ReactJunior~2 min read

Short definition

Component composition is a way to build complex interfaces out of simple components, combining them like "building blocks".

In other words:

Composition is nesting and combining components, where one component includes or uses others to form more complex behavior or structure.

A simple analogy

React components are LEGO construction pieces. You can take simple blocks (Button, Card, Input) and assemble them into anything, from a form to a whole page.

Example 1. Basic composition

javascript

function Header() {
  return <header>Header</header>;
}

function Footer() {
  return <footer>Footer</footer>;
}

function App() {
  return (
    <div>
      <Header />
      <main>Content</main>
      <Footer />
    </div>
  );
}

Here:

App is made up of the Header, Footer and main components;
This is composition - "components inside components".

Example 2. Composition via `props.children`

You can pass JSX inside a component:

javascript

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

function App() {
  return (
    <Card>
      <h2>Title</h2>
      <p>Card description</p>
    </Card>
  );
}

Here Card is a "wrapper", and everything between the <Card>...</Card> tags ends up in props.children.

This lets you build flexible container components.

Example 3. Composition via named props

You can pass different interface parts explicitly:

javascript

function Layout({ header, content, footer }) {
  return (
    <div>
      <header>{header}</header>
      <main>{content}</main>
      <footer>{footer}</footer>
    </div>
  );
}

function App() {
  return (
    <Layout
      header={<h1>My site</h1>}
      content={<p>Welcome!</p>}
      footer={<small>© 2025</small>}
    />
  );
}

This is a variant of composition where a component accepts "slots" for different parts of the content.

Example 4. Composition for reusing logic (the "Container + Presentation" pattern)

Presentation component:

javascript

function UserCard({ user }) {
  return (
    <div>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  );
}

Container:

javascript

function UserContainer() {
  const [user, setUser] = useState({ name: "Alex", email: "alex@example.com" });
  return <UserCard user={user} />;
}

The container manages the logic, while UserCard just displays the data. Composition helps separate responsibilities.

Example 5. Composition via "render props"

javascript

function DataProvider({ children }) {
  const data = { message: "Hello!" };
  return children(data);
}

function App() {
  return (
    <DataProvider>
      {(data) => <h1>{data.message}</h1>}
    </DataProvider>
  );
}

Here children is a function that receives the data. This is a way to pass behavior through composition.

Example 6. Composition via "HOC" (higher-order components)

javascript

function withLogger(Component) {
  return function Wrapped(props) {
    console.log("Render:", Component.name);
    return <Component {...props} />;
  };
}

const ButtonWithLog = withLogger(Button);

This is also a form of composition: a function takes a component and returns a new one with additional logic.

Why composition matters

Makes code reusable Helps separate responsibilities (UI vs. logic) Lets you nest and compose the interface as a modular system Simplifies testing and maintenance

Composition vs. Inheritance

React follows the principle:

"Composition over inheritance".

Instead of creating component "superclasses", in React we simply nest one component inside another, or pass the needed interface parts through props.

Summary

Concept	Description	Example
Composition	Nesting one component inside another	`<Card><Content /></Card>`
Via children	Flexible content for a component	`{children}`
Via props	Explicit passing of JSX	`<Layout header={<Header />} />`
Via render props / HOC	Reusing logic	`withAuth(Component)`
Benefit	Flexibility, modularity, clean architecture	-

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.