Component Composition in React

Analogy categoryAnalogies

Introduction

Component composition is the practice of building complex user interfaces by combining smaller, focused components together, rather than relying on inheritance. React strongly favors composition over inheritance: instead of creating a base component class and extending it, you assemble UIs from independent components that can be nested, reused, and configured through props and children.

🏏

Cricket analogy: Like building a strong batting lineup by selecting specialists for each role — an opener, an anchor, a finisher — and combining them, rather than trying to clone one all-rounder's exact technique into every position; React favors this specialist-combination approach over inheritance.

Syntax

jsx

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

function App() {
  return (
    <Card>
      <h2>Title</h2>
      <p>Some card content goes here.</p>
    </Card>
  );
}

Explanation

The props.children pattern lets a parent component pass arbitrary JSX into a child component, enabling flexible wrapper components like Card, Modal, or Layout. Composition also includes patterns like passing components as props (specialization) and combining multiple small components into a larger feature component. This approach keeps components focused on a single responsibility, making them easier to test, reuse, and reason about, and it avoids the tight coupling and fragile hierarchies that inheritance-based UI frameworks often suffer from.

🏏

Cricket analogy: Like a stadium's hospitality box (a wrapper) that can host any event inside it — a corporate function, a fan meet, a press conference — without the box itself needing to know what's happening inside, keeping the venue reusable for any occasion.

Example

jsx

function Avatar({ src, alt }) {
  return <img className="avatar" src={src} alt={alt} />;
}

function UserName({ name }) {
  return <span className="username">{name}</span>;
}

function UserProfile({ user }) {
  return (
    <div className="profile">
      <Avatar src={user.avatarUrl} alt={user.name} />
      <UserName name={user.name} />
    </div>
  );
}

Output

UserProfile composes two smaller, independent components — Avatar and UserName — into a single cohesive feature. Each smaller component remains reusable on its own elsewhere in the app, while UserProfile focuses purely on arranging them together.

🏏

Cricket analogy: Like a team's opening partnership pairing a stroke-player and an anchor into one cohesive unit at the crease, while each batsman remains independently capable of opening with a different partner in another match.

The official React documentation explicitly recommends composition over inheritance: 'React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.'

Key Takeaways

React favors composition over inheritance for reusing UI logic between components.
The props.children pattern lets components wrap arbitrary child content, enabling flexible containers.
Small, single-responsibility components are easier to test, reuse, and maintain.
Components can be composed by nesting, passing components as props, or combining several small components.
Composition avoids the tight coupling and fragile hierarchies common with class inheritance.