Component composition

ReactJunior~3 min read

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.

Short Answer

Interview ready

Premium

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