Suggest an edit

Improve this article

Refine the answer for “What is component composition?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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 | - |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts564 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.