Suggest an edit

Improve this article

Refine the answer for “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)

## What "component composition" is

> **Component composition** is a way to **assemble a UI from independent, reusable blocks**, combining them with each other like a **LEGO set**.

In other words:

> One component can **include**, **wrap**, or **embed** other components, forming complex UI.

---

## Composition example

### 1. Basic component

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

### 2. Using it through composition

```javascript
<Card>
  <h2>Title</h2>
  <p>Card description</p>
</Card>
```

> Here `Card` doesn't know *what exactly* is inside.
> It's just a "container", and content is inserted through `children`.
> This is **composition** - combining components by including them in each other.

---

## Composition instead of inheritance

### Inheritance (classic OOP approach)

If React were built on inheritance, you'd have to do this:

```javascript
class SpecialButton extends Button {
  render() {
    return <button style={{ color: "red" }}>{this.props.label}</button>;
  }
}
```

> That is, "extend" an existing component.
> This **tightly couples** components: if the base one changes, the descendant might break.

---

### Composition (the React approach)

```javascript
function Button({ children, ...props }) {
  return <button {...props}>{children}</button>;
}

function SpecialButton() {
  return <Button style={{ color: "red" }}>Click</Button>;
}
```

> We **use a component inside another one**,
> instead of **inheriting** from it.
> This gives more flexibility and fewer couplings.

---

## Why React chose composition

| Reason | Explanation |
|---|---|
| Flexibility | You can combine components in any structure |
| Isolation | Each component is independent, does not know details of others |
| Reusability | One component can be inserted into different contexts |
| A clear interface | A component manages only its `props` and `children` |
| Fewer couplings | No rigid class hierarchy (unlike OOP) |
| Composition = declarativeness | "I describe *what's included in what*", not "which class extends which" |

---

## Types of composition in React

### 1. Through `children`

The most basic way:

```javascript
<Layout>
  <Sidebar />
  <Content />
</Layout>
```

→ the `<Layout>` component renders `props.children`.

---

### 2. Through prop components

You can pass specific "slots":

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

<Dialog
  title="Delete account?"
  footer={<button>Yes, delete</button>}
>
  <p>This action cannot be undone.</p>
</Dialog>
```

> This approach is often called the **"slot pattern"** -
> where different parts of the UI can be inserted inside a component.

---

### 3. Through Compound Components

(a more advanced variant of composition):

```javascript
<Accordion>
  <Accordion.Item>
    <Accordion.Header>Question</Accordion.Header>
    <Accordion.Panel>Answer</Accordion.Panel>
  </Accordion.Item>
</Accordion>
```

> Here all the logic lives in `Accordion`, but the developer **builds the UI compositionally themselves**.

---

### 4. Through render props

(yet another way to compose through functions):

```javascript
<DataProvider render={(data) => <Chart data={data} />} />
```

---

## Why composition beats inheritance

| Criterion | Composition | Inheritance |
|---|---|---|
| Extending behavior | Through nesting and props | Through `extends` |
| Structural flexibility | Very high | A rigid hierarchy |
| Isolation | Components are independent | Classes are coupled |
| Reusability | Excellent | Limited |
| Risk of breakage | Minimal | High (when the base class changes) |
| Approach in React | Preferred | Not used |

---

## A metaphor

- **Composition** = LEGO: you can build anything from independent blocks.
- **Inheritance** = DNA: if you change the "parent", all the "descendants" break.

---

## Summary

| What | Description |
|---|---|
| Composition | Combining components by including them in each other |
| Goal | Reusability and flexibility without rigid couplings |
| Example | `<Card><Header /><Body /></Card>` |
| Advantage | Isolation, readability, scalability |
| Inheritance | Too rigid and does not fit React's declarative model |

---

> **Key idea:**
> React components don't inherit, they **compose**.
>
> Instead of "create a new class from an old one" → you "insert a component into another one".
> This is what makes React declarative, predictable, and flexible.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.