React › Component Composition & Children Props

What is component composition in React and why is it useful?

Beginner

Answer

Component composition means building complex user interfaces by combining small, simple components together, instead of writing one giant component that does everything. This makes each piece easier to understand, test, and reuse in different places across an app.

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

function App() {
  return (
    <Card title="Welcome">
      <p>This content is passed in as children.</p>
    </Card>
  );
}

Real-world example A design team builds one reusable Card component, then uses it to display a product, a blog post, and a user profile, simply by passing different content inside it each time.

Common follow-ups: How is passing children different from passing a regular prop?;When should a team decide to break a large component into smaller pieces?

Components & JSX;Higher-Order Components (HOCs)