React Component Composition — The Art of Building UI Like LEGO

Let's say you're building a website.

• You've made a Header
• You have a Sidebar
• You've created a cool Button

Now what?

You need to put it all together like LEGO — that's where component composition comes in.

---

🧠 What is Component Composition in React?

Component Composition means building bigger components by combining smaller ones.

Instead of writing one giant file with everything, you break your UI into mini-blocks (components), and then plug them together.

React encourages this pattern because it's:

• ✅ Scalable
• ✅ Reusable
• ✅ Clean and readable

---

🔍 Why Not Use Inheritance Like Java?

Because React follows composition over inheritance.

In class-based languages (like Java/C++), you extend and inherit.

In React, you compose:

"Build components like functions, not like blue-blooded class trees."

---

🧱 Simple Composition Example

Let's say you have a Card, and inside it, you want to show different types of content.

Card.js:

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

Using it in another file:

<Card>
  <h2>Title</h2>
  <p>This is the content inside the card.</p>
</Card>

Here, the Card doesn't care what's inside — it accepts children and renders them. That's composition in action.

---

🛠️ Real-World Use Case

Imagine building a Modal component:

Modal.js:

const Modal = ({ title, children, footer }) => {
  return (
    <div className="modal">
      <h3>{title}</h3>
      <div className="body">{children}</div>
      <div className="footer">{footer}</div>
    </div>
  );
};

App.js:

<Modal
  title="Delete Item"
  footer={<button>Confirm</button>}
>
  <p>Are you sure you want to delete this?</p>
</Modal>

You just composed an entire custom modal using flexible blocks.

---

⚙️ Advanced Pattern: Compound Components

This pattern lets you group sub-components inside a parent.

Example: Tabs

<Tabs>
  <Tabs.Tab label="Tab 1">Content 1</Tabs.Tab>
  <Tabs.Tab label="Tab 2">Content 2</Tabs.Tab>
</Tabs>

This makes your component declarative, flexible, and clean to read.

---

🔥 Use Composition for:

• Layouts – headers, sidebars, containers
• Forms – fields, inputs, labels, grouped under <Form />
• Cards & Modals – pass body/footer as children or props
• Reusable UI Blocks – like a Section or Panel component

---

📦 Bonus: Virendana UI is Fully Composable

If you've checked out Virendana UI — my open-source React UI kit — you'll notice all components are designed to be composable and extendable.

No rigid structure. You take a Card, wrap it, pass anything inside it — and it just works.

Use it in 10 places with different content — and the core style & layout stay consistent.

🔁 That's the power of composition-driven UI.

---

🧠 Best Practices for Composition

• ✅ Design components to accept children
• ✅ Avoid deep nesting — keep it readable
• ✅ Use props for custom content, but children for layout flexibility
• ✅ Make base components dumb, and wrap them with logic when needed
• ✅ Compose layout-first, not feature-first

---

✅ Summary: What is Component Composition?

Concept	Explanation
Composition	Combining small components into bigger ones
Benefit	Reusable, modular, cleaner code
Tools used	props, children, layout wrappers
Example	<Card><h1>Title</h1></Card>
Alternative to	Inheritance-based architecture

---

🧠 FAQs – Component Composition in React

1. What is component composition in React?

It's building larger components by nesting and combining smaller components together.

2. What's the difference between composition and inheritance?

Inheritance extends one component from another. Composition wraps and nests, giving you more flexibility.

3. When should I use children vs props?

Use children when the content is dynamic (slots). Use props when passing specific values (title, icon, actions).

4. Is composition good for large-scale apps?

Absolutely. It keeps the code DRY, modular, and easy to maintain.

5. How does Virendana UI use composition?

Virendana UI components are designed to accept children, be flexible, and integrate anywhere in your React app — no constraints, just flow.

❤️ At Learn Virendana, we love creating high-quality React tutorials that simplify complex concepts and deliver a practical, real-world React learning experience for developers