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
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
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.
Practice what you learned
1. What does React officially recommend for reusing code between components?
2. What special prop allows a component to render arbitrary nested content passed by its parent?
3. Which of these is an example of composition in the lesson's UserProfile example?
4. Why is composition generally preferred over inheritance for React components?
Was this page helpful?
You May Also Like
Functional Components in React
Understand how to define and use functional components, the modern default building block of React apps.
Props in React
Learn how props pass read-only data from parent to child components in React's one-way data flow model.
Conditional Rendering in React
Learn the common patterns for showing or hiding UI elements based on conditions in React components.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics