Components, Props & Children Composition
Props are read-only inputs passed from parents to children that enforce unidirectional data flow. The children prop enables component composition and slot patterns, allowing parents to pass arbitrary UI trees without coupling components to specific child implementations.
Key Learning Objectives
Understand unidirectional data flow and prop immutability in React.
Master the children prop and slot composition pattern to eliminate prop drilling.
Differentiate between component inheritance and component composition.
Explain how composition prevents unnecessary re-rendering of wrapper containers.
The Interview Problem & Context
Explain why React strongly prefers composition over inheritance. How does passing components via props.children optimize rendering performance compared to passing data props down deep trees?
1import React, { ReactNode } from 'react';23// Shell container using the slot pattern4interface ModalCardProps {5 title: string;6 actions: ReactNode; // Named slot7 children: ReactNode; // Default slot8}910export function ModalCard({ title, actions, children }: ModalCardProps) {11 return (12 <div className="modal-card">13 <header className="modal-header">14 <h2>{title}</h2>15 </header>16 <main className="modal-body">{children}</main>17 <footer className="modal-actions">{actions}</footer>18 </div>19 );20}
Deep Architectural Explanation
Composition Over Inheritance in React
In React, components are designed around composition rather than classical object-oriented inheritance. Instead of creating subclasses like SpecialDialog extends Dialog, you compose components by passing elements as props.
1. The children Prop & Named Slots
props.childrenis the default slot for nested JSX content.- Any valid React node (primitives, elements, fragments, functions) can be passed as regular props (e.g.,
actions={<Button />}), creating powerful named slots.
2. The Performance Advantage of Composition
Passing children elements directly has a massive performance benefit:
function Parent() {
const [theme, setTheme] = useState('dark');
return (
<Container>
<ExpensiveTree /> {/* Created in Parent's scope! */}
</Container>
);
}If Container has its own internal state that updates frequently, Container re-renders, but ExpensiveTree (passed as children) does not re-render because its element reference remained identical from Parent!
Common Interview Traps & Pitfalls
Mutating props directly in child components (e.g., props.user.name = "Bob").
Prop drilling data through 5 layers of intermediate components instead of using composition or slots.
Assuming components need classical inheritance for code reuse.
Senior Interviewer Follow-Up Probes
How does passing elements as children prevent re-renders of the child when the container state changes?
What is the difference between passing a React Element (children: <Card />) vs a render function (children: () => <Card />)?
How do Compound Components build on the children composition pattern?
Frequently Asked Interview Questions
How does component composition solve prop drilling?
Instead of passing data props down through intermediate container components that do not need the data, you pass the fully configured child element directly into the container using the children or slot props.
Can props.children be a function instead of JSX?
Yes, this is known as the "Render Props" or "Function as Child" pattern, allowing the parent component to pass internal state or control parameters to the child.
Why did the React team choose composition over inheritance?
Composition provides complete flexibility without the rigid coupling and fragile base class problems of inheritance. Components can be combined like Lego blocks.
What is the type of children in TypeScript React components?
Usually React.ReactNode, which accommodates strings, numbers, JSX elements, fragments, arrays, and null or undefined.