mediumFrontend

Explain the concept of 'composition' in React components.

Q: Explain the concept of 'composition' in React components.

**Core concept (TL;DR).** Composition means building complex UIs by **combining and nesting** small components — passing other components/markup via the children prop or named props — instead of using class inheritance. React explicitly favours **composition over inheritance** for reuse and customization. Build UIs by nesting components via children <Card> <rect x="150" y="66" wid

969 views

Understand the problem

This question assesses understanding of a fundamental design pattern for building flexible React applications.

compositioncomponentsdesign patternsreusability

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A reusable Card via children

function Card({ title, children }) {     // generic container
  return (
    <section style={{ border: "1px solid #ccc", borderRadius: 12, padding: 16, margin: 8 }}>
      <h3>{title}</h3>
      {children}                            {/* whatever the caller nests */}
    </section>
  );
}

export default function App() {
  return (
    <div style={{ fontFamily: "system-ui", padding: 16 }}>
      <Card title="Profile">
        <p>Ada Lovelace</p>
        <button>Follow</button>
      </Card>
      <Card title="Stats">
        <ul><li>Posts: 12</li><li>Followers: 340</li></ul>
      </Card>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Describe the React component lifecycle.

How does React handle events?