React Component Composition

In the last lesson you learned Nesting React Components, where one component renders another inside it. Now we take that further: putting small pieces together on purpose to build something bigger, an idea called composition.

🤔 Why Composition?

Here is the pain you hit without composition:

• You start with one component for a page. It feels fine at first.
• Then you add a header. Then a sidebar. Then a few cards and a footer.
• Soon that one component is hundreds of lines long. You scroll and scroll just to find one button.
• And when you need a second card that looks almost the same, you copy and paste it. So now the same code lives in two places.
• You change one and forget the other. Slowly they drift apart and your page breaks.

Composition fixes this, and the idea is simple:

• You build small components that each do one job.
• Then you put them together to make the bigger thing.

🧩 What Composition Means

Composition means you build a big component by combining smaller components. It is like clicking building blocks together.

Think of a single building block. On its own it is small and plain. But snap a few together and you can build a house, a car, almost anything. Each block stays simple. The interesting part is how you arrange them.

React works the same way:

• You write small components like Avatar, UserName, and Bio. Each one does one little job.
• Then a ProfileCard component arranges those three together.
• The ProfileCard does not redo their work. It just composes them.

Here is a small profile card built from smaller parts.

function Avatar() {
  return <img src="/alex.jpg" alt="Alex" className="avatar" />;
}

function UserName() {
  return <h3>Alex Carter</h3>;
}

function Bio() {
  return <p>Frontend developer based in Berlin.</p>;
}

function ProfileCard() {
  return (
    <div className="card">
      <Avatar />
      <UserName />
      <Bio />
    </div>
  );
}

Let us walk through it.

• Avatar, UserName, and Bio are three small components. Each one returns one little piece of UI.
• ProfileCard does not write any image or heading itself. It just lines up the three smaller components inside a <div>.
• The big component is now easy to read. You can see at a glance that a profile card is an avatar, a name, and a bio.

And here is why this helps:

• Each small part can be tested, reused, and changed on its own.
• The big component reads almost like a sentence that describes what it holds.

📦 Composition Beats Copy-Paste

Let us see why composition is better than copying. Say you need three cards on a page. Without composition you might copy the same markup three times.

// ❌ Avoid: same markup copied again and again
function Page() {
  return (
    <div>
      <div className="card">
        <h3>Plan A</h3>
        <p>Best for starters.</p>
      </div>
      <div className="card">
        <h3>Plan B</h3>
        <p>Best for teams.</p>
      </div>
      <div className="card">
        <h3>Plan C</h3>
        <p>Best for big companies.</p>
      </div>
    </div>
  );
}

See the problem here?

• The card structure is repeated three times.
• If you want to add a border to every card, you have to edit it in three places.
• Miss one and your page looks broken.

With composition you write the card shape once. Then you reuse it.

// ✅ Good: one PlanCard, reused with different text
function PlanCard({ title, note }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{note}</p>
    </div>
  );
}

function Page() {
  return (
    <div>
      <PlanCard title="Plan A" note="Best for starters." />
      <PlanCard title="Plan B" note="Best for teams." />
      <PlanCard title="Plan C" note="Best for big companies." />
    </div>
  );
}

Now the card shape lives in one place:

• Want a border on every card? Edit PlanCard once and all three update together.
• This is the heart of reuse. You write it once, then use it everywhere.

🎁 The children Prop: Wrapping Content

So far each card decided its own content through props like title and note. But sometimes you want a component to wrap whatever you put inside it, and you do not know ahead of time what that will be. Maybe it is text. Maybe an image. Maybe a whole form.

For this React gives every component a special prop called children. Whatever you place between a component’s opening and closing tags shows up as props.children inside that component.

Here is a Card that wraps anything you give it.

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

function App() {
  return (
    <Card>
      <h3>Welcome</h3>
      <p>This text was passed in as children.</p>
    </Card>
  );
}

Let us read it carefully.

• Card pulls children out of its props, then renders it inside a styled <div>.
• In App, everything between <Card> and </Card> becomes the children.
• So the <h3> and the <p> get dropped right where {children} sits.

On the screen you would see the heading and the paragraph, both inside the card box. Here is a quick sketch of how that looks.

[ Card box ]
  Welcome
  This text was passed in as children.

The nice part is that Card does not care what is inside it. It only gives you the box and the styling. You decide the contents each time you use it.

The deeper details of children and other props come later in the Props module. For now, just remember that it lets a component wrap content passed between its tags.

🧱 A Layout Component

Composition really shines for page layout. A Layout component can hold the header and footer that every page shares. Then it lets children fill the middle.

function Layout({ children }) {
  return (
    <div>
      <header>My Site</header>
      <main>{children}</main>
      <footer>© 2026</footer>
    </div>
  );
}

function HomePage() {
  return (
    <Layout>
      <h1>Home</h1>
      <p>Welcome to the home page.</p>
    </Layout>
  );
}

The walkthrough is short.

• Layout always renders the same header and footer.
• The page content goes in as children and lands inside <main>.
• Every page wrapped in Layout gets the shared header and footer for free.

And here is why this is so handy:

• The header and footer are written once.
• Tomorrow you can wrap an AboutPage in the same Layout and it instantly matches the rest of the site.

⚠️ Common Mistakes

A few things trip people up early on.

• Building one giant component. When a component grows past a screenful, that is your sign to break it into smaller composed pieces.
• Copy-pasting instead of reusing. If you find yourself pasting the same block twice, stop and turn it into a component you can reuse.
• Forgetting to render children. If your wrapper component does not include {children} somewhere, the content you pass between its tags simply disappears.
• Putting children in the wrong spot. The content shows up exactly where you write {children}. Place it inside the part meant to hold the inner content, like the <main> in a layout.

✅ Best Practices

Keep these habits and composition stays clean.

• Make each component do one clear job. Small parts are easier to reuse and combine.
• Reach for children when a component is meant to be a wrapper, like a card, a modal, or a layout.
• Use named props like title when the content is a known, fixed slot. Use children when the content is open-ended.
• Name components for what they are, like Card or Layout, so the composed code reads like a description of the screen.

🧩 What You’ve Learned

A quick recap of the ideas from this lesson.

• ✅ Composition means building bigger components by combining smaller ones, instead of one giant component.
• ✅ Composition beats copy-paste. Write a shape like PlanCard once, then reuse it with different props.
• ✅ The children prop lets a component wrap whatever you put between its tags.
• ✅ Render that content with {children} inside the wrapper, like a Card or a Layout.
• ✅ Good composition makes your code shorter, clearer, and easier to change in one place.

🚀 What’s Next?

You now know how to combine small components into bigger ones and how to wrap content with children. Next we turn that skill into a habit by designing components built for reuse from the start.

Reusable React Components