Why Component composition in React? - Purpose & Use Cases

The Big Idea

Discover how building UI like Lego blocks saves you hours of tedious work!

The Scenario

Imagine building a webpage where you have to manually copy and paste the same header, footer, and button code into every page. Every time you want to change the button style, you have to find and update it everywhere.

The Problem

Manually repeating code is slow and risky. If you miss one spot, your site looks inconsistent. It's like trying to fix every light bulb in a big house one by one instead of changing the whole fixture.

The Solution

Component composition lets you build small pieces (components) and combine them like building blocks. Change one piece, and all places using it update automatically. It's like having reusable Lego blocks for your UI.

Before vs After

✗ Before

function Page() {
  return <div><header>My Site</header><button>Click me</button><footer>© 2024</footer></div>;
}

✓ After

function Header() { return <header>My Site</header>; }
function Footer() { return <footer>© 2024</footer>; }
function Button() { return <button>Click me</button>; }
function Page() {
  return <div><Header /><Button /><Footer /></div>;
}

What It Enables

It enables building complex interfaces easily by combining simple, reusable parts that work together smoothly.

Real Life Example

Think of a social media app where the same profile card component appears in many places. With composition, updating the card's look once updates it everywhere instantly.

Key Takeaways

Manual repetition causes errors and wastes time.

Component composition builds UI from reusable pieces.

It makes updates easy and keeps interfaces consistent.