Component Composition & Children Props
5 questions foundWhat is component composition in React and why is it useful?
Beginner 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)
What is the children prop in React and how does it work?
Intermediate The children prop automatically holds whatever content is placed between the opening and closing tags of a component. It lets a component wrap around any content without needing to know in advance exactly what that content will be.
function Layout({ children }) {
return (
<div className="layout">
<header>My Site</header>
<main>{children}</main>
<footer>Copyright 2026</footer>
</div>
);
}
<Layout>
<h1>Home Page</h1>
</Layout>
Real-world example A website reuses the same Layout component on every page, and simply changes what content sits inside the header, main, and footer by passing different children each time.
Common follow-ups: Can a component receive both a children prop and other named props at the same time?;What happens if a component using children is rendered with no content inside it?
Components & JSX;Props & State
How does composition help avoid the problem known as prop drilling?
Intermediate Prop drilling happens when you pass a prop through many components that do not actually need it, just so it can reach a component deep inside the tree. Composition can avoid this by passing the deeply needed component itself as children, so it sits closer to where the data actually lives, skipping the middle layers entirely.
// Instead of drilling a theme prop through three levels
function Page({ theme }) {
return (
<Sidebar>
<Profile theme={theme} /> {/* passed directly as children, skipping Sidebar */}
</Sidebar>
);
}
function Sidebar({ children }) {
return <aside>{children}</aside>;
}
Real-world example A large app avoids passing a user object through four layers of unrelated components by instead composing the component that actually needs the user data directly as a child, right next to where that data is available.
Common follow-ups: When is the Context API a better solution than composition for avoiding prop drilling?;What is a real world sign that a codebase has too much prop drilling?
Context API;Props & State
How would you build a flexible component using multiple named slots instead of a single children prop?
Advanced Instead of only accepting one block of children, a component can accept several props that each hold their own piece of content, such as a header slot and a footer slot. This gives more control over exactly where each piece of content should appear inside the layout.
function PageLayout({ header, sidebar, children }) {
return (
<div className="page">
<div className="header">{header}</div>
<div className="sidebar">{sidebar}</div>
<div className="content">{children}</div>
</div>
);
}
<PageLayout header={<Navbar />} sidebar={<Filters />}>
<ProductList />
</PageLayout>
Real-world example An admin dashboard uses named slots for its header and sidebar so each page can supply completely different navigation and filter content, while sharing the exact same overall page layout.
Common follow-ups: How is this named slot pattern different from how children works by default?;What is a good rule of thumb for deciding how many slots a component should have?
Design Patterns in React;Components & JSX
What is the difference between passing a component as a prop and nesting it as children?
Beginner Nesting as children is the natural way of writing JSX where content sits between opening and closing tags, and it reads like regular HTML. Passing a component as a named prop is useful when a component needs more than one separate piece of content in different places, since children alone only gives you a single slot.
// Nested as children, one slot
<Card>
<p>Main content</p>
</Card>
// Passed as a named prop, extra slot
<Card footer={<Button>Save</Button>}>
<p>Main content</p>
</Card>
Real-world example A settings page component nests its main form fields as children, but passes its save button separately as a footer prop, giving the parent control over exactly where the button appears.
Common follow-ups: Can you mix children and named component props in the same component?;Which approach is easier for a new developer joining the team to understand?
Components & JSX;Props & State