React: What is component composition?

Component composition is building complex interfaces from small, independent components.

Simple analogy: Imagine you are assembling a burger.

• You have ingredients: bun (Layout), patty (Content), lettuce (Sidebar), sauce (Footer).
• You can make a million different burgers from the same ingredients.
• Encapsulation: you don't look inside the patty, you just place it whole.

Main composition patterns:

1. props.children — "Slot for content":

1function Card({ children, title }) {
2    return (
3        <div className="card">
4            <h2>{title}</h2>
5            {children}  {/* Everything inside <Card> will go here */}
6        </div>
7    );
8}
9
10<Card title="User">
11    <Avatar />  {/* This is children */}
12    <p>Name: Alice</p>  {/* And this too */}
13</Card>

2. Multiple slots (through props):

1function Layout({ header, sidebar, main }) {
2    return (
3        <div>
4            <header>{header}</header>
5            <aside>{sidebar}</aside>
6            <main>{main}</main>
7        </div>
8    );
9}

Composition advantages:

1. Reusability — one Card can be used anywhere.
2. Flexibility — no need to create 50 Card variants for each case.
3. Simplicity — each component is small and clear.
4. Testability — each component is tested separately.

Principle: Better to have 10 small components assembled together than 1 huge one.