Composition
📚 What is Component Composition? Composition means building a UI by combining small, focused components together -- like LEGO bricks. Instead of one giant component that does everything, you build many tiny ones and assemble them. React is designed around this idea: a Page contains a Header and a …
Appy Says…
React's superpower isn't any single feature — it's composition. You build big apps by combining small, focused components. Each component does one thing well; compose them together to build anything.
What is Component Composition?
Composition is building complex UIs by nesting and combining simpler components. Instead of inheritance (like OOP), React uses composition — components wrap other components.
- •
<Card><Title /><Body /></Card>— Card composes Title and Body - •
childrenprop: whatever is between opening and closing tags - •
function Card({ children }) { return <div className='card'>{children}</div>; } - •Slot pattern: multiple named 'slots' via props:
header=,footer= - •Render props: pass a function as a prop that returns JSX
- •HOC (Higher Order Component): function that takes a component and returns an enhanced one
Think of it like Roblox model kits
Roblox models are built by combining smaller parts — a car body + 4 wheels + engine + seats. Each part works on its own and can be used in multiple models. React composition works identically: build a Button, use it in a Card, use that Card in a Dashboard.
How It Works
- •1. Create focused, reusable components (Button, Input, Card, Modal)
- •2. Compose them:
<Modal><LoginForm /></Modal> - •3. children prop receives everything between the tags
- •4. For named slots:
<Dialog header={<Title />} footer={<Buttons />}>...</Dialog> - •5. Context provides shared data to any depth without prop drilling
- •6. Hooks extract stateful logic into reusable functions
Real-World Examples
- •shadcn/ui: Card, Dialog, Button — compose them to build any UI
- •React Router: <Routes> wraps <Route> which wraps your page components
- •Applaa's Academy: LessonCard wrapped in TrackGrid wrapped in AcademyDashboard
- •Next.js App Router: layout.tsx wraps page.tsx — pure composition
Key Facts
- •React explicitly chose composition over inheritance — Facebook's React docs say 'we found no use case for component inheritance'
- •The children prop is just a regular prop of type ReactNode
- •Component composition is also why React libraries (shadcn, Radix, Headless UI) are so flexible
- •Compound component pattern: Card.Header, Card.Body, Card.Footer as sub-components
Watch Out!
Don't create massive 'god components' that do everything — a 500-line component is a sign to extract. Each component should be understandable in isolation. If you can name it (LoginForm, ProductCard, UserAvatar), extract it.
Remember
Build small, focused components. Combine them to build big UIs. The children prop lets any component wrap any content. Composition over inheritance — always.
What You Learned
- •Composition: combine simple components to build complex UIs; children prop passes nested JSX
- •Build focused, reusable components; compose them into pages and features
- •Unlocks: scalable UI architecture, reusable design systems, any complex layout
Key Facts
- →React explicitly chose composition over inheritance — Facebook's React docs say 'we found no use case for component inheritance'
- →The children prop is just a regular prop of type ReactNode
- →Component composition is also why React libraries (shadcn, Radix, Headless UI) are so flexible
- →Compound component pattern: Card.Header, Card.Body, Card.Footer as sub-components
Real-World Examples
Remember
Build small, focused components. Combine them to build big UIs. The children prop lets any component wrap any content. Composition over inheritance — always.
Quick Quiz
Composition means?