📘 Component Composition in React — Complete Theory Guide

1. Introduction

🔹 What is Component Composition?

Component composition is a pattern in React where you build complex UIs by combining smaller, reusable components together. Instead of inheritance, React promotes:

👉 “Build components using other components”

function Layout({ children }) {
  return <div className="layout">{children}</div>;
}

function App() {
  return (
    <Layout>
      <h1>Hello</h1>
      <p>Welcome</p>
    </Layout>
  );
}

Here, Layout is composed with child elements.

🔹 Why is it Important in React?

Encourages reusability
Improves maintainability
Promotes separation of concerns
Aligns with React’s declarative model

React is fundamentally built around composition rather than inheritance.

🔹 When & Why We Use It

Use component composition when:

Building layouts (headers, sidebars, cards)
Creating reusable UI patterns
Sharing behavior without inheritance
Avoiding prop drilling complexity
Designing flexible APIs for components

2. Concepts / Internal Workings

🔹 2.1 Composition vs Inheritance

React avoids inheritance because:

It creates tight coupling
Harder to scale and refactor

Instead, React uses:

<ComponentA>
  <ComponentB />
</ComponentA>

🔹 2.2 The `children` Prop

At the core of composition is children.

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

Usage:

<Card>
  <h2>Title</h2>
  <p>Description</p>
</Card>

👉 Internally:

React passes everything inside <Card> as props.children
It can be:
- JSX
- Arrays
- Functions
- Strings

🔹 2.3 Containment Pattern

Used when components act as containers.

function Modal({ children }) {
  return <div className="modal">{children}</div>;
}

🔹 2.4 Specialization Pattern

Creating specific components using generic ones.

function Button({ children }) {
  return <button>{children}</button>;
}

function PrimaryButton() {
  return <Button>Primary</Button>;
}

🔹 2.5 Multiple Slots (Advanced Composition)

Sometimes we need multiple “holes”:

function Layout({ header, footer, children }) {
  return (
    <>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </>
  );
}

Usage:

<Layout
  header={<h1>Header</h1>}
  footer={<p>Footer</p>}
>
  <p>Content</p>
</Layout>

🔹 2.6 Function as Children (Render Props)

A powerful composition pattern:

function DataFetcher({ children }) {
  const data = { name: "John" };
  return children(data);
}

<DataFetcher>
  {(data) => <p>{data.name}</p>}
</DataFetcher>

🔹 2.7 Compound Components Pattern

Components work together as a group:

function Tabs({ children }) {
  return <div>{children}</div>;
}

Tabs.Tab = function Tab({ children }) {
  return <button>{children}</button>;
};

<Tabs>
  <Tabs.Tab>Tab 1</Tabs.Tab>
  <Tabs.Tab>Tab 2</Tabs.Tab>
</Tabs>

🔹 2.8 How It Works Internally in React

JSX is transformed into React elements (objects)
children becomes part of props
During reconciliation:
- React builds a component tree
- Each composed component becomes a node
React efficiently updates only changed nodes

👉 Composition does NOT create deep inheritance chains — just nested trees.

🔹 2.9 Relationship with Other React Features

✔ Props

Composition heavily relies on props (especially children)

✔ State

State can be lifted or shared across composed components

✔ Context API

Helps avoid prop drilling in deeply composed trees

✔ Hooks

Composition + hooks = reusable logic

3. Syntax & Examples

🔹 3.1 Basic Composition

function Wrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}

function App() {
  return (
    <Wrapper>
      <h1>Hello</h1>
    </Wrapper>
  );
}

🔹 3.2 Reusable Card Component

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

<Card title="User">
  <p>Name: John</p>
</Card>

🔹 3.3 Layout Composition

function PageLayout({ sidebar, content }) {
  return (
    <div className="layout">
      <aside>{sidebar}</aside>
      <main>{content}</main>
    </div>
  );
}

<PageLayout
  sidebar={<p>Menu</p>}
  content={<p>Main Content</p>}
/>

🔹 3.4 Wrapper for Styling

function Box({ children }) {
  return <div style={{ padding: "10px" }}>{children}</div>;
}

🔹 3.5 Render Props Example

function Toggle({ children }) {
  const [on, setOn] = React.useState(false);
  return children(on, () => setOn(!on));
}

<Toggle>
  {(on, toggle) => (
    <button onClick={toggle}>
      {on ? "ON" : "OFF"}
    </button>
  )}
</Toggle>

🔹 3.6 Compound Components Example

function Accordion({ children }) {
  return <div>{children}</div>;
}

Accordion.Item = function ({ title, children }) {
  return (
    <div>
      <h3>{title}</h3>
      <div>{children}</div>
    </div>
  );
};

<Accordion>
  <Accordion.Item title="Q1">Answer</Accordion.Item>
</Accordion>

4. Edge Cases / Common Mistakes

⚠️ 4.1 Forgetting to Render `children`

function Box({ children }) {
  return <div></div>; // ❌ children ignored
}

👉 Fix:

return <div>{children}</div>;

⚠️ 4.2 Over-Composition

Too many layers:

<A>
  <B>
    <C>
      <D />
    </C>
  </B>
</A>

❌ Leads to:

Hard debugging
Poor readability

⚠️ 4.3 Prop Drilling Instead of Composition

<Parent data={data}>
  <Child data={data}>

👉 Instead:

Use composition or context

⚠️ 4.4 Misusing Render Props

<Data>{data}</Data> // ❌ not a function

👉 Should be:

<Data>{(data) => <div>{data}</div>}</Data>

⚠️ 4.5 Breaking Encapsulation

Passing too much control:

<Component internalStateSetter={setState} />

❌ Exposes internals

⚠️ 4.6 Key Issues in Composed Lists

{items.map(item => (
  <Card>{item.name}</Card> // ❌ missing key
))}

5. Best Practices

✅ 5.1 Prefer Composition Over Inheritance

Always favor composition-first design

✅ 5.2 Keep Components Small & Focused

Each component should:

Do one thing well
Be easily composable

✅ 5.3 Use Clear Component APIs

Bad:

<Component data1 data2 data3 />

Better:

<Layout header={...} footer={...} />

✅ 5.4 Avoid Deep Nesting

Flatten when possible:

<Layout>
  <Header />
  <Content />
</Layout>

✅ 5.5 Combine Composition with Hooks

function useToggle() {
  const [on, setOn] = useState(false);
  return { on, toggle: () => setOn(!on) };
}

✅ 5.6 Memoization for Performance

Use:

React.memo
useMemo
useCallback

When:

Components are deeply composed
Props rarely change

✅ 5.7 Use Compound Components for Complex UI

Ideal for:

Tabs
Accordions
Dropdowns

✅ 5.8 Use Context to Avoid Prop Drilling

const ThemeContext = React.createContext();

✅ 5.9 Keep Composition Predictable

Avoid hidden side effects
Keep data flow clear

🔚 Summary

Component composition is the core philosophy of React:

Build small → Combine → Scale
Prefer flexibility over rigid hierarchies
Enables powerful patterns like:
- Render props
- Compound components
- Layout systems

📘 Advanced Interview Questions — Component Composition (React)

1. What problem does component composition solve that inheritance cannot in React?

✅ Strong Answer

Composition solves flexibility and decoupling problems that inheritance introduces.

Inheritance creates tight coupling between parent-child classes
Leads to rigid hierarchies and difficult refactoring
React instead uses tree-based composition

👉 With composition:

<Layout>
  <Sidebar />
  <Content />
</Layout>

Each component is:

Independent
Replaceable
Reusable

💡 Why this matters

React’s reconciliation works on a tree of elements, not class hierarchies. Composition maps naturally to this model.

🔁 Alternative

Inheritance → rigid, static
Composition → dynamic, runtime flexibility

2. How does React internally handle `children` during reconciliation?

✅ Strong Answer

children is just a prop
During JSX transformation:

<Card>
  <p>Hello</p>
</Card>

becomes:

React.createElement(Card, null, React.createElement('p', null, 'Hello'));

👉 Internally:

children is stored inside props.children
React builds a fiber tree
Each child becomes a fiber node

💡 Key Insight

React does not treat children specially after creation — they’re just part of the props tree.

⚠️ Pitfall

If children change structure:

React diffing depends on keys + order
Can cause unnecessary re-renders

3. Why is composition preferred over prop drilling for deep component trees?

✅ Strong Answer

Prop drilling creates:

Tight coupling across layers
Hard-to-maintain APIs
Increased re-render surface

<Parent data={data}>
  <Child data={data}>
    <GrandChild data={data} />
  </Child>
</Parent>

👉 With composition:

<Parent>
  <GrandChild data={data} />
</Parent>

💡 Why it works

Data stays closer to where it’s needed
Intermediate components become agnostic wrappers

🔁 Alternative

Context API for global/shared state
Composition for structural flexibility

4. What are the trade-offs between `children`-based composition and explicit props (slots)?

✅ Strong Answer

Option 1: `children`

<Card>
  <Header />
  <Body />
</Card>

✔ Flexible ❌ Implicit structure (harder to enforce)

Option 2: Named slots

<Card header={<Header />} body={<Body />} />

✔ Explicit ✔ Easier validation ❌ Slightly verbose

💡 Trade-off Summary

Approach	Flexibility	Readability	Control
children	High	Medium	Low
slots	Medium	High	High

👉 Senior engineers choose based on:

API clarity
Design constraints

5. Explain the Compound Component pattern and its internal coordination mechanism.

✅ Strong Answer

Compound components share implicit state via context.

const TabsContext = React.createContext();

function Tabs({ children }) {
  const [active, setActive] = useState(0);

  return (
    <TabsContext.Provider value={{ active, setActive }}>
      {children}
    </TabsContext.Provider>
  );
}

Child components consume it:

function Tab({ index, children }) {
  const { active, setActive } = useContext(TabsContext);

  return (
    <button onClick={() => setActive(index)}>
      {children}
    </button>
  );
}

💡 Why this works

Avoids prop drilling
Keeps API clean:

<Tabs>
  <Tab index={0}>Tab 1</Tab>
</Tabs>

⚠️ Trade-off

Hidden coupling via context
Harder to debug than explicit props

6. When would you avoid using composition and prefer a custom hook instead?

✅ Strong Answer

Use hooks when sharing logic, not UI. ❌ Composition misuse:

<Toggle>
  {(on) => <Component on={on} />}
</Toggle>

✔ Better:

const { on, toggle } = useToggle();

💡 Rule

Composition → UI structure
Hooks → logic reuse

7. What are the performance implications of deeply composed component trees?

✅ Strong Answer

Deep composition can cause:

More fiber nodes
Increased reconciliation work
Prop changes cascading downward

Example

<A>
  <B>
    <C>
      <D />
    </C>
  </B>
</A>

💡 Optimization

React.memo
Avoid unnecessary re-renders
Stable props with useCallback

⚠️ Insight

Depth alone isn’t bad — unstable props are the real issue

8. How can composition lead to unnecessary re-renders, and how do you prevent it?

✅ Strong Answer

Problem:

<Wrapper>
  <Child data={{ value: 1 }} />
</Wrapper>

New object every render → re-render

Fix:

const data = useMemo(() => ({ value: 1 }), []);

Or:

const Child = React.memo(...)

💡 Core Idea

Composition amplifies prop instability across tree levels.

9. What is the difference between render props and component composition?

✅ Strong Answer

Render Props

<Data>
  {(data) => <UI data={data} />}
</Data>

Dynamic rendering
Logic-driven composition

Composition

<Data>
  <UI />
</Data>

Static structure

💡 Trade-off

Pattern	Flexibility	Complexity
Composition	Medium	Low
Render Props	High	Higher

10. How do you enforce constraints in a highly composable API?

✅ Strong Answer

Problem:

<Card>
  <RandomComponent />
</Card>

No guarantees of structure.

Solutions:

Runtime validation:

React.Children.forEach(children, child => {
  if (child.type !== AllowedComponent) {
    throw new Error("Invalid child");
  }
});

TypeScript constraints
Compound pattern enforcement

💡 Trade-off

Flexibility vs Safety

11. Why can overusing composition hurt readability?

✅ Strong Answer

Excess nesting:

<A>
  <B>
    <C>
      <D />
    </C>
  </B>
</A>

Issues:

Hard tracing data flow
Debug complexity
Reduced clarity

💡 Fix

Flatten structure
Extract meaningful components

12. How does composition interact with Context API?

✅ Strong Answer

Context complements composition:

Composition defines structure
Context provides data access

<ThemeProvider>
  <Layout>
    <Button />
  </Layout>
</ThemeProvider>

💡 Insight

Without context:

Deep composition → prop drilling

With context:

Decoupled data access

13. What are “controlled vs uncontrolled” composition patterns?

✅ Strong Answer

Controlled:

<Tabs active={active} onChange={setActive} />

Parent controls state

Uncontrolled:

<Tabs defaultActive={0} />

Component manages state

💡 Trade-off

Type	Control	Complexity
Controlled	High	Higher
Uncontrolled	Low	Simpler

14. How do keys affect composed components?

✅ Strong Answer

Keys affect:

Identity
Reconciliation

{items.map(item => (
  <Card key={item.id} />
))}

⚠️ Pitfall

Wrong keys:

key={index}

→ causes:

State bugs
UI mismatches

15. How would you design a flexible layout system using composition?

✅ Strong Answer

<Layout>
  <Layout.Header />
  <Layout.Sidebar />
  <Layout.Content />
</Layout>

Internally:

Uses context for layout coordination
Uses slots for flexibility

💡 Why this design

Declarative API
Clear structure
Scalable

16. When does composition break encapsulation?

✅ Strong Answer

If parent controls too much:

<Component setInternalState={setState} />

Problem:

Leaks internal logic
Breaks abstraction

💡 Fix

Expose:

Callbacks
Controlled APIs

17. How does composition influence testability?

✅ Strong Answer

✔ Improves testability:

Smaller units
Easier mocking

render(<Card><MockChild /></Card>);

⚠️ But:

Deep composition → harder integration tests

18. How do you debug issues in a deeply composed component tree?

✅ Strong Answer

Approach:

Trace props flow
Use React DevTools (component tree)
Check memoization issues
Inspect re-renders

💡 Senior Insight

Most bugs come from:

Incorrect assumptions about composition boundaries
Hidden coupling via context

🔚 Final Takeaway

Senior-level understanding of composition means:

Knowing when NOT to use it
Balancing flexibility vs control
Understanding how React internally processes trees
Designing clean, scalable APIs

📘 Advanced MCQs — Component Composition in React (Senior Level)

1. What will be rendered in this composition scenario?

function Wrapper({ children }) {
  return <div>{children}</div>;
}

function App() {
  return (
    <Wrapper>
      {null}
      {false}
      {"Hello"}
    </Wrapper>
  );
}

Options:

A. Nothing renders B. Only "Hello" renders C. null, false, and "Hello" all render D. React throws an error

✅ Correct Answer: B

✔ Explanation:

React ignores:

null
false
undefined

Only valid renderable values like strings, numbers, and JSX are rendered. 👉 "Hello" is the only renderable child.

❌ Why others are wrong:

A: Incorrect — "Hello" is rendered
C: React does NOT render null or false
D: No error occurs

2. What is the key issue in this composition pattern?

function Layout({ children }) {
  return <section>{children}</section>;
}

function App() {
  return (
    <Layout>
      {[<div>A</div>, <div>B</div>]}
    </Layout>
  );
}

Options:

A. Invalid JSX syntax B. Missing keys in children array C. children cannot be arrays D. Layout must use React.Children.map

✅ Correct Answer: B

✔ Explanation:

When rendering arrays:

[<div>A</div>, <div>B</div>]

React requires keys for stable reconciliation.

❌ Why others are wrong:

A: Syntax is valid
C: Arrays are allowed
D: Not required, just optional utility

3. What happens when children change order without keys?

<>
  <Item name="A" />
  <Item name="B" />
</>

→ becomes:

<>
  <Item name="B" />
  <Item name="A" />
</>

Options:

A. React re-renders both correctly B. React swaps DOM nodes efficiently C. State may get mixed between components D. React throws warning and stops rendering

✅ Correct Answer: C

✔ Explanation:

Without keys:

React uses index-based reconciliation
Components may retain wrong state

👉 This leads to state leakage bugs

❌ Why others are wrong:

A: Not guaranteed correct
B: Incorrect — React cannot track identity
D: Warning only, not a crash

4. What is the issue with this composition?

function Card({ children }) {
  return <div>{children}</div>;
}

<Card>
  <Header />
  <Footer />
</Card>

Options:

A. Nothing is wrong B. Order of children is not guaranteed C. Card cannot accept multiple children D. Header/Footer must be passed as props

✅ Correct Answer: A

✔ Explanation:

React preserves:

Order
Structure of children

This is a valid and common pattern.

❌ Why others are wrong:

B: Order is preserved
C: Multiple children allowed
D: Not required

5. What is the subtle bug here?

function Wrapper({ children }) {
  return children;
}

Options:

A. Wrapper must return a div B. children must be cloned C. Multiple children will cause an error D. Nothing is wrong

✅ Correct Answer: D

✔ Explanation:

React allows returning:

A single child
Multiple children (as array)

No wrapper needed.

❌ Why others are wrong:

A: Not required (Fragments exist)
B: Cloning is optional
C: Arrays are valid

6. What is problematic in this pattern?

function Parent({ children }) {
  return React.Children.only(children);
}

Usage:

<Parent>
  <Child1 />
  <Child2 />
</Parent>

Options:

A. Only first child renders B. Runtime error C. Both children render D. Warning only

✅ Correct Answer: B

✔ Explanation:

React.Children.only expects exactly one child Multiple children → throws error

❌ Why others are wrong:

A: It does not silently ignore
C: Not allowed
D: It throws, not warns

7. What happens in this render prop misuse?

function Data({ children }) {
  return children("data");
}

<Data>
  <div />
</Data>

Options:

A. <div /> renders normally B. children is ignored C. Runtime error D. “data” is rendered

✅ Correct Answer: C

✔ Explanation:

children is expected to be a function, but it’s a React element. Calling it:

children("data")

→ TypeError

❌ Why others are wrong:

A: Incorrect type
B: It is executed, not ignored
D: Function never runs

8. What is the issue with this composition?

function Modal({ children }) {
  return <div>{children}</div>;
}

<Modal>
  {() => <p>Hello</p>}
</Modal>

Options:

A. Function will render automatically B. Nothing renders C. React throws error D. Function is converted to string

✅ Correct Answer: B

✔ Explanation:

React does NOT execute functions passed as children unless explicitly called.

{children()} // required

❌ Why others are wrong:

A: No automatic execution
C: No error
D: Functions are ignored, not stringified

9. Why is this composition inefficient?

<Wrapper>
  <Child config={{ a: 1 }} />
</Wrapper>

Options:

A. config is invalid B. Wrapper causes re-render C. New object each render breaks memoization D. children cannot accept objects

✅ Correct Answer: C

✔ Explanation:

Every render creates new object → breaks React.memo

❌ Why others are wrong:

A: Valid object
B: Not necessarily
D: Objects allowed

10. What is the main risk of this compound component pattern?

<Tabs>
  <Tab />
</Tabs>

(with internal context)

Options:

A. Performance issues B. Hidden dependency on parent context C. Cannot scale D. JSX limitation

✅ Correct Answer: B

✔ Explanation:

Compound components rely on context → implicit coupling 👉 <Tab> must be inside <Tabs>

❌ Why others are wrong:

A: Not inherently slow
C: It scales well
D: No JSX issue

11. What happens if context is missing?

<Tab />

(outside <Tabs>)

Options:

A. Works normally B. Uses default state C. Likely runtime error D. React auto-wraps

✅ Correct Answer: C

✔ Explanation:

useContext returns undefined → accessing properties causes error

❌ Why others are wrong:

A: No context → broken
B: Only if default defined
D: React does not auto-wrap

12. What is the issue here?

function Card({ children }) {
  return <div>{children}</div>;
}

<Card children={<p>Hello</p>} />

Options:

A. Invalid syntax B. children prop is overridden C. children cannot be passed explicitly D. Nothing is wrong

✅ Correct Answer: D

✔ Explanation:

children is just a prop → can be passed explicitly

❌ Why others are wrong:

A: Valid
B: No override issue
C: Allowed

13. What is the risk in this pattern?

function Wrapper({ children }) {
  return React.cloneElement(children, { extra: true });
}

Options:

A. children cannot be cloned B. Only works with one child C. Breaks React rules D. Causes memory leak

✅ Correct Answer: B

✔ Explanation:

cloneElement requires a single React element Multiple children → error

❌ Why others are wrong:

A: It can be cloned
C: Valid API
D: No leak

14. What is the issue with deep composition and context?

Options:

A. Context cannot pass deeply B. All components re-render on context change C. Context breaks composition D. Context cannot be nested

✅ Correct Answer: B

✔ Explanation:

Context updates → all consumers re-render 👉 Performance concern in large trees

❌ Why others are wrong:

A: It can pass deeply
C: They complement each other
D: Nesting allowed

15. Why might this API design be problematic?

<Component>
  <Header />
  <Random />
</Component>

Options:

A. JSX invalid B. No control over allowed children C. children must be array D. React disallows mixed types

✅ Correct Answer: B

✔ Explanation:

No constraints → unpredictable structure 👉 Hard to enforce design rules

❌ Why others are wrong:

A: Valid
C: Not required
D: Allowed

16. What happens when returning arrays from children?

function Wrapper({ children }) {
  return children;
}

Options:

A. Error B. Works if keys exist C. Only first child renders D. Array is flattened automatically

✅ Correct Answer: B

✔ Explanation:

React supports arrays, but keys are required for stability.

❌ Why others are wrong:

A: No error
C: All children render
D: Not “flattened” automatically

🔚 Final Insight

These questions test whether you understand:

Composition ≠ just children
It deeply affects:
- Reconciliation
- Performance
- API design
- Debugging complexity

📘 Component Composition — Advanced Coding Problems (React)

These problems simulate real-world UI architecture and design challenges using component composition.

🧩 1. Flexible Layout System (Slots-Based)

🧠 Problem

Build a Layout component that supports:

Header
Sidebar
Content
Footer

Using composition (not props drilling).

⚙️ Constraints

Must allow optional sections
Order should not matter
Clean API

✅ Expected Usage

<Layout>
  <Layout.Header>Header</Layout.Header>
  <Layout.Sidebar>Sidebar</Layout.Sidebar>
  <Layout.Content>Main</Layout.Content>
</Layout>

⚠️ Edge Cases

Missing sections
Multiple headers
Invalid children

💡 Solution (Step-by-step)

Use context to register slots
Identify child types via type
Render in fixed layout positions

const LayoutContext = React.createContext();

function Layout({ children }) {
  const slots = {};

  React.Children.forEach(children, child => {
    slots[child.type.name] = child;
  });

  return (
    <div>
      {slots.Header}
      {slots.Sidebar}
      {slots.Content}
      {slots.Footer}
    </div>
  );
}

🧠 Problem

Create a Modal that supports:

Controlled (isOpen)
Uncontrolled (defaultOpen)

⚙️ Constraints

Must support both modes cleanly
Avoid duplicate state logic

✅ Expected Behavior

Parent can control open state
Internal state fallback if not provided

💡 Solution

function Modal({ isOpen, defaultOpen, children }) {
  const [internal, setInternal] = React.useState(defaultOpen);

  const open = isOpen !== undefined ? isOpen : internal;

  return open ? <div>{children}</div> : null;
}

🧩 3. Accordion (Compound Components)

🧠 Problem

Build an accordion where items manage open/close via shared state.

⚙️ Constraints

Only one item open at a time
Clean composition API

✅ Expected Usage

<Accordion>
  <Accordion.Item title="Q1">A1</Accordion.Item>
</Accordion>

💡 Solution

Use context for active index
Each item reads & updates it

🧩 4. Tabs with Dynamic Registration

🧠 Problem

Tabs should:

Auto-register children
Support dynamic addition/removal

⚠️ Edge Cases

Tabs added after mount
Missing indices

💡 Solution Insight

Use React.Children.map
Use index-based tracking + keys

🧩 5. Form Builder with Composition

🧠 Problem

Create a Form component where:

Inputs register themselves
Form collects values

✅ Usage

<Form onSubmit={...}>
  <Form.Input name="email" />
  <Form.Input name="password" />
</Form>

💡 Solution

Context for form state
Inputs update shared store

🧩 6. Permission-Based Rendering Wrapper

🧠 Problem

Render children only if user has permission.

⚙️ Constraints

Should support multiple permissions
Nested composition

💡 Solution

function Permission({ allow, children }) {
  const user = useUser();

  return allow.includes(user.role) ? children : null;
}

🧩 7. Data Fetcher (Render Props vs Composition)

🧠 Problem

Support both:

<Data>{(data) => ...}</Data>

AND

<Data>
  <Child />
</Data>

⚠️ Edge Case

Detect if child is function

💡 Solution

return typeof children === "function"
  ? children(data)
  : children;

🧩 8. Card with Strict Child Validation

🧠 Problem

Card should only allow:

Card.Header
Card.Body

⚠️ Edge Cases

Invalid children
Multiple headers

💡 Solution

React.Children.forEach(children, child => {
  if (![Header, Body].includes(child.type)) {
    throw new Error("Invalid child");
  }
});

🧩 9. List Virtualization Wrapper

🧠 Problem

Wrap large lists while preserving composition.

⚙️ Constraints

Only render visible items
Accept child renderer

💡 Solution

Use render function
Combine with windowing logic

🧩 10. Theme Provider with Composition

🧠 Problem

Provide theme to deeply nested components.

💡 Solution

const ThemeContext = React.createContext();

<ThemeContext.Provider value="dark">
  <Layout />
</ThemeContext.Provider>

🧠 Problem

Wrap any element with tooltip behavior.

⚠️ Edge Case

Child must accept props

💡 Solution

React.cloneElement(children, {
  onMouseEnter: showTooltip
});

🧩 12. Error Boundary Wrapper

🧠 Problem

Catch errors in composed children.

💡 Solution

Use class component
Wrap children

🧩 13. Multi-Step Form Wizard

🧠 Problem

Steps defined via composition:

<Wizard>
  <Step />
  <Step />
</Wizard>

💡 Solution

Track active step via context
Render one step at a time

🧠 Problem

Render children outside DOM hierarchy.

💡 Solution

ReactDOM.createPortal(children, document.body);

🧩 15. Drag-and-Drop Wrapper

🧠 Problem

Enable drag behavior for any child.

⚠️ Edge Case

Child event conflicts

💡 Solution

Inject handlers via cloning

🧩 16. Layout Switcher (Responsive Composition)

🧠 Problem

Switch layout based on screen size.

💡 Solution

Conditional composition

return isMobile ? <MobileLayout /> : <DesktopLayout />;

🧩 17. Notification System (Stacked Composition)

🧠 Problem

Allow multiple notifications via composition.

💡 Solution

Context store + dynamic children

🧩 18. Skeleton Loader Wrapper

🧠 Problem

Wrap content with loading placeholder.

💡 Solution

function Skeleton({ loading, children }) {
  return loading ? <Loader /> : children;
}

🧩 19. Access-Controlled Route Wrapper

🧠 Problem

Restrict route access via composition.

💡 Solution

<Route element={
  <Protected>
    <Dashboard />
  </Protected>
} />

🧩 20. Analytics Wrapper (Cross-Cutting Concern)

🧠 Problem

Track interactions across children.

💡 Solution

Wrap children
Inject tracking props/events

🔚 Final Takeaway

These problems test your ability to:

Design scalable APIs
Balance flexibility vs control
Handle real-world constraints
Understand composition deeply (not just children)

📘 Component Composition — Real-World Debugging Challenges (Senior Code Review)

These are production-grade bugs involving composition, not trivial mistakes.

🐞 1. Children Not Rendering

❌ Buggy Code

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

🔍 What’s Wrong

children is never rendered.

💥 Why It Happens

In composition, children are just props — React won’t render them automatically.

✅ Fix

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

✅ Best Practice

Always explicitly render children in container components.

🐞 2. Broken Memoization Due to Inline Composition

❌ Buggy Code

const Child = React.memo(({ config }) => {
  console.log("render");
  return <div>{config.value}</div>;
});

function Parent() {
  return (
    <Child config={{ value: 1 }} />
  );
}

🔍 What’s Wrong

Child re-renders every time.

💥 Why It Happens

New object reference on each render → breaks React.memo.

✅ Fix

function Parent() {
  const config = React.useMemo(() => ({ value: 1 }), []);
  return <Child config={config} />;
}

✅ Best Practice

Stabilize props in composed trees using useMemo.

🐞 3. State Leakage Due to Missing Keys

❌ Buggy Code

{items.map((item, index) => (
  <Input key={index} value={item.value} />
))}

🔍 What’s Wrong

Inputs show incorrect values after reordering.

💥 Why It Happens

Index-based keys → React reuses wrong components.

✅ Fix

{items.map(item => (
  <Input key={item.id} value={item.value} />
))}

✅ Best Practice

Never use index as key in dynamic composed lists.

🐞 4. Render Prop Misuse

❌ Buggy Code

function Fetcher({ children }) {
  const data = { name: "John" };
  return <div>{children}</div>;
}

Usage:

<Fetcher>
  {(data) => <p>{data.name}</p>}
</Fetcher>

🔍 What’s Wrong

Function never executes.

💥 Why It Happens

React does not auto-call function children.

✅ Fix

return <div>{children(data)}</div>;

✅ Best Practice

Detect and handle function-as-children explicitly.

🐞 5. CloneElement Crash with Multiple Children

❌ Buggy Code

function Wrapper({ children }) {
  return React.cloneElement(children, { active: true });
}

Usage:

<Wrapper>
  <Button />
  <Button />
</Wrapper>

🔍 What’s Wrong

Runtime error.

💥 Why It Happens

cloneElement expects single React element, not array.

✅ Fix

return React.Children.map(children, child =>
  React.cloneElement(child, { active: true })
);

✅ Best Practice

Always handle multiple children via React.Children.map.

🐞 6. Context Undefined in Compound Component

❌ Buggy Code

const TabsContext = React.createContext();

function Tab() {
  const { active } = React.useContext(TabsContext);
  return <div>{active}</div>;
}

Usage:

<Tab />

🔍 What’s Wrong

App crashes.

💥 Why It Happens

No provider → useContext returns undefined.

✅ Fix

const context = React.useContext(TabsContext);
if (!context) throw new Error("Tab must be inside Tabs");

✅ Best Practice

Guard compound components against missing providers.

🐞 7. Hidden Re-render Cascade

❌ Buggy Code

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <Wrapper>
      <Child />
    </Wrapper>
  );
}

🔍 What’s Wrong

Child re-renders even if it doesn’t use count.

💥 Why It Happens

Parent re-render → all children re-render.

✅ Fix

const Child = React.memo(() => { ... });

✅ Best Practice

Memoize deeply composed children.

🐞 8. Incorrect Child Type Assumption

❌ Buggy Code

React.Children.forEach(children, child => {
  console.log(child.props.name);
});

🔍 What’s Wrong

Crashes when child is string/null.

💥 Why It Happens

Children can be:

strings
null
arrays

✅ Fix

if (React.isValidElement(child)) {
  console.log(child.props.name);
}

✅ Best Practice

Always validate children before accessing props.

🐞 9. Function Child Not Called Conditionally

❌ Buggy Code

return children && children(data);

🔍 What’s Wrong

Crashes if children is not function.

💥 Why It Happens

Assumes children is callable.

✅ Fix

return typeof children === "function"
  ? children(data)
  : children;

✅ Best Practice

Support both patterns safely.

🐞 10. Overwriting Event Handlers

❌ Buggy Code

React.cloneElement(children, {
  onClick: () => console.log("wrapper")
});

🔍 What’s Wrong

Child’s original onClick lost.

💥 Why It Happens

Props are overwritten.

✅ Fix

const original = children.props.onClick;

React.cloneElement(children, {
  onClick: (e) => {
    original?.(e);
    console.log("wrapper");
  }
});

✅ Best Practice

Merge, don’t override props.

🐞 11. Multiple Slot Collision

❌ Buggy Code

slots[child.type.name] = child;

🔍 What’s Wrong

Only last child kept.

💥 Why It Happens

Same key overwritten.

✅ Fix

slots[child.type.name] = [
  ...(slots[child.type.name] || []),
  child
];

✅ Best Practice

Handle multiple instances safely.

🐞 12. Stale Closure in Composed Callback

❌ Buggy Code

function Wrapper({ children }) {
  const [count, setCount] = useState(0);

  return React.cloneElement(children, {
    onClick: () => setCount(count + 1)
  });
}

🔍 What’s Wrong

May use stale count.

💥 Why It Happens

Closure captures old state.

✅ Fix

onClick: () => setCount(c => c + 1)

✅ Best Practice

Use functional updates in composed callbacks.

🐞 13. Fragment Children Misinterpretation

❌ Buggy Code

React.Children.count(children) === 1

🔍 What’s Wrong

Fails for fragments.

💥 Why It Happens

Fragments wrap multiple children but count as one.

✅ Fix

React.Children.toArray(children).length

✅ Best Practice

Normalize children before inspection.

🐞 14. Conditional Rendering Losing State

❌ Buggy Code

{show && <Child />}

🔍 What’s Wrong

Child state resets when toggled.

💥 Why It Happens

Component unmounts/remounts.

✅ Fix

<Child hidden={!show} />

✅ Best Practice

Avoid unmounting when state must persist.

🐞 15. Deep Composition Causing Prop Drilling

❌ Buggy Code

<A data={data}>
  <B data={data}>
    <C data={data} />
  </B>
</A>

🔍 What’s Wrong

Unnecessary prop passing.

💥 Why It Happens

Poor composition design.

✅ Fix

Use context:

<DataContext.Provider value={data}>
  <C />
</DataContext.Provider>

✅ Best Practice

Use context for deeply shared data.

🐞 16. Unstable Child Identity

❌ Buggy Code

<Wrapper>
  {() => <Child />}
</Wrapper>

🔍 What’s Wrong

New function every render → re-renders.

💥 Why It Happens

Function identity changes.

✅ Fix

const renderChild = useCallback(() => <Child />, []);

✅ Best Practice

Stabilize function props.

🐞 17. Unexpected Rendering Order

❌ Buggy Code

React.Children.map(children, child => {
  return condition ? child : null;
});

🔍 What’s Wrong

Keys shift → order instability.

💥 Why It Happens

Filtering without preserving keys.

✅ Fix

React.Children.toArray(children).filter(...)

✅ Best Practice

Normalize + filter safely.

🐞 18. Infinite Re-render Loop via Composition

❌ Buggy Code

function Parent() {
  const [state, setState] = useState(0);

  return (
    <Child update={() => setState(state + 1)} />
  );
}

🔍 What’s Wrong

Child triggers update → infinite loop.

💥 Why It Happens

Unstable callback causes repeated updates.

✅ Fix

const update = useCallback(() => {
  setState(s => s + 1);
}, []);

✅ Best Practice

Stabilize callbacks passed through composition.

🔚 Final Takeaway

Real-world composition bugs usually come from:

❌ Wrong assumptions about children
❌ Unstable references (objects/functions)
❌ Hidden coupling (context, compound patterns)
❌ Misuse of React utilities (cloneElement, Children)
❌ Reconciliation misunderstandings

📘 Component Composition — Real-World Machine Coding Problems (Senior Architect Level)

These problems simulate production-grade frontend architecture challenges where component composition is central.

🧠 Problem

Build a fully accessible dropdown system with:

Trigger
Menu
Items

✅ Requirements

Keyboard navigation (↑ ↓ Enter Esc)
Controlled + uncontrolled modes
Custom rendering of items

🎯 UI Behavior

Clicking trigger toggles menu
Arrow keys navigate items
Only one item active

🔄 State/Data Flow

Shared via context:
- isOpen
- activeIndex
- selectItem

⚠️ Edge Cases

Click outside to close
Dynamic items list
Nested dropdowns

⚡ Performance

Avoid re-renders on hover
Memoize item list

🏗 Suggested Architecture

<Dropdown>
  <Dropdown.Trigger />
  <Dropdown.Menu>
    <Dropdown.Item />
  </Dropdown.Menu>
</Dropdown>

🛠 Approach

Create context
Register items dynamically
Handle keyboard events globally
Use refs for focus control

🧠 Problem

Create a composable modal system supporting:

Multiple modals
Nested modals
Portal rendering

🎯 UI Behavior

Modal overlays page
Focus trapped inside
Escape closes modal

🔄 Data Flow

Global modal manager (context/store)

⚠️ Edge Cases

Multiple modals stacked
Background scroll lock

⚡ Performance

Avoid re-rendering entire app
Use portals for isolation

🏗 Architecture

<Modal>
  <Modal.Trigger />
  <Modal.Content />
</Modal>

🛠 Approach

Use createPortal
Manage modal stack
Trap focus with refs

🧩 3. Dynamic Form Builder (Schema + Composition)

🧠 Problem

Build a form system where:

Fields self-register
Supports validation & dynamic fields

🎯 UI Behavior

Real-time validation
Dynamic addition/removal of fields

🔄 Data Flow

Central form state via context

⚠️ Edge Cases

Nested fields
Async validation

⚡ Performance

Avoid re-rendering entire form
Field-level subscriptions

🏗 Architecture

<Form>
  <Form.Field name="email" />
</Form>

🛠 Approach

Create field registry
Use context for state
Isolate updates per field

🧩 4. Compound Tabs with Lazy Rendering

🧠 Problem

Tabs where inactive panels are not rendered.

⚠️ Edge Cases

Preserving state on unmount
Dynamic tab addition

⚡ Performance

Lazy mount panels
Memoize tab content

🏗 Architecture

<Tabs>
  <Tabs.List />
  <Tabs.Panel />
</Tabs>

🛠 Approach

Track active tab
Conditionally render panel

🧩 5. Notification System (Global + Composable)

🧠 Problem

Create a toast system with:

Stacked notifications
Auto-dismiss
Custom content

🔄 Data Flow

Global context store

⚠️ Edge Cases

Rapid fire notifications
Duplicate messages

⚡ Performance

Avoid re-rendering all toasts

🏗 Architecture

<ToastProvider>
  <App />
</ToastProvider>

🛠 Approach

Maintain queue
Render via portal

🧩 6. Drag-and-Drop Composable System

🧠 Problem

Enable drag-drop via composition.

⚠️ Edge Cases

Nested draggables
Performance on large lists

⚡ Performance

Avoid full re-renders during drag

🏗 Architecture

<Draggable>
  <Item />
</Draggable>

🛠 Approach

Inject props via cloneElement
Use refs for DOM tracking

🧩 7. Virtualized List with Render Composition

🧠 Problem

Render large datasets efficiently.

⚠️ Edge Cases

Dynamic item heights
Scroll jumps

⚡ Performance

Windowing
Memoized item renderer

🏗 Architecture

<VirtualList>
  {(item) => <Row item={item} />}
</VirtualList>

🛠 Approach

Calculate visible range
Render subset

🧩 8. Multi-Step Wizard

🧠 Problem

Composable steps with shared state.

⚠️ Edge Cases

Skippable steps
Async validation

🏗 Architecture

<Wizard>
  <Step />
</Wizard>

🛠 Approach

Track current step
Share state via context

🧩 9. Access-Control Wrapper System

🧠 Problem

Control UI visibility based on roles.

⚠️ Edge Cases

Nested permissions
Async auth

🏗 Architecture

<Protected roles={["admin"]}>
  <Dashboard />
</Protected>

🛠 Approach

Context-based auth
Conditional rendering

🧩 10. Analytics Wrapper

🧠 Problem

Track user interactions across app.

⚠️ Edge Cases

Prevent duplicate tracking
Debounce events

🏗 Architecture

<Track event="click">
  <Button />
</Track>

🛠 Approach

Inject handlers via cloning
Central tracking system

🧩 11. Layout System with Responsive Composition

🧠 Problem

Switch layout dynamically.

⚠️ Edge Cases

Resize events
SSR mismatch

🏗 Architecture

<ResponsiveLayout />

🛠 Approach

Media queries + composition switching

🧩 12. Skeleton Loader Wrapper

🧠 Problem

Wrap any component with loading state.

⚠️ Edge Cases

Partial loading
Layout shifts

🛠 Approach

Conditional rendering + placeholder

🧩 13. Infinite Scroll Feed

🧠 Problem

Composable feed with lazy loading.

⚠️ Edge Cases

Scroll threshold issues
Duplicate fetches

🛠 Approach

IntersectionObserver
State batching

🧩 14. Global Search Overlay

🧠 Problem

Search UI accessible anywhere.

⚠️ Edge Cases

Keyboard shortcut conflicts
Debounce search

🛠 Approach

Portal + context

🧩 15. Table System (Headless + Composable)

🧠 Problem

Customizable table:

Columns
Sorting
Pagination

⚠️ Edge Cases

Large datasets
Column reordering

🛠 Approach

Headless logic + UI composition

🧩 16. Feature Flag Wrapper

🧠 Problem

Enable/disable features dynamically.

⚠️ Edge Cases

Async flags
A/B testing

🛠 Approach

Context-based flags

🧩 17. Error Boundary System (Composable)

🧠 Problem

Wrap parts of app for error isolation.

⚠️ Edge Cases

Nested boundaries
Reset behavior

🛠 Approach

Class-based error boundaries

🧩 18. Command Palette (Keyboard Driven UI)

🧠 Problem

Global command system (like VS Code).

⚠️ Edge Cases

Focus management
Search ranking

🛠 Approach

Context + portal + keyboard events

🧩 19. Timeline/Activity Feed System

🧠 Problem

Composable event feed with grouping.

⚠️ Edge Cases

Time grouping
Dynamic updates

🛠 Approach

Data transformation + composed UI

🧠 Problem

Multi-level navigation menus.

⚠️ Edge Cases

Keyboard navigation
Deep nesting

🛠 Approach

Recursive composition
Context for active state

🔚 Final Takeaway

These problems test true senior-level skills:

Designing composable APIs
Managing state across trees
Handling performance + edge cases
Balancing flexibility vs control

📘 FAANG-Level Interview Questions — Component Composition (React)

These questions probe architecture thinking, trade-offs, debugging ability, and performance awareness — not surface knowledge.

🔍 Follow-ups

How would you support nested modals?
How would you prevent misuse of subcomponents?

✅ Strong Answer

Use compound components:

<Modal>
  <Modal.Trigger />
  <Modal.Content />
</Modal>

Share state via context
Use portal for rendering
Add guards for invalid usage

💡 Trade-offs

Flexibility vs API constraints
Context coupling vs explicit props

❌ Weak Answer

“Just pass isOpen prop and render children” 👉 Fails because:

Ignores composability
Doesn’t scale for complex UI

2. When would you prefer render props over composition?

🔍 Follow-ups

What are performance implications?
How does it affect readability?

✅ Strong Answer

Use render props when:
- UI depends on dynamic data/logic
- Need runtime control

<Data>{(data) => <UI data={data} />}</Data>

💡 Trade-off

More flexible but harder to read/debug

❌ Weak Answer

“Render props are just another way to pass children” 👉 Misses key difference: function execution vs static structure

3. How does React treat `children` internally, and why does it matter for performance?

🔍 Follow-ups

How does reconciliation use keys?
What happens with unstable children?

✅ Strong Answer

children → part of props
Converted into fiber nodes
Reconciliation depends on:
- Keys
- Order

👉 Unstable children → unnecessary re-renders

❌ Weak Answer

“Children is just JSX” 👉 Too shallow, no understanding of reconciliation

4. You see unnecessary re-renders in a deeply composed tree. How do you debug?

🔍 Follow-ups

What tools would you use?
How do you isolate the issue?

✅ Strong Answer

Use React DevTools (highlight updates)
Check prop identity (objects/functions)
Add React.memo
Profile renders

❌ Weak Answer

“Use memo everywhere” 👉 Blind optimization without root cause analysis

🔍 Follow-ups

What if tabs are dynamically added?
How do you prevent misuse?

✅ Strong Answer

Compound components + context
Track active index
Register children dynamically

❌ Weak Answer

“Pass active tab as prop to each Tab” 👉 Leads to prop drilling and poor scalability

6. What are the risks of overusing composition?

🔍 Follow-ups

When does composition hurt readability?
How do you balance abstraction?

✅ Strong Answer

Deep nesting → hard debugging
Implicit structure → unclear APIs
Hidden coupling via context

❌ Weak Answer

“No downsides, composition is always good” 👉 Shows lack of real-world experience

7. How do you enforce constraints in a composable API?

🔍 Follow-ups

Compile-time vs runtime validation?

✅ Strong Answer

Use:
- TypeScript typings
- Runtime validation (child.type)
- Controlled compound components

❌ Weak Answer

“Document it” 👉 Documentation is not enforcement

8. Compare composition vs custom hooks for reuse.

🔍 Follow-ups

Can they be combined?

✅ Strong Answer

Composition → UI reuse
Hooks → logic reuse

👉 Best systems combine both

❌ Weak Answer

“They are interchangeable” 👉 Incorrect mental model

9. How does composition impact bundle size and performance?

🔍 Follow-ups

Tree-shaking implications?

✅ Strong Answer

More components ≠ worse performance
But:
- More layers → more renders
- Inline functions/objects hurt memoization

❌ Weak Answer

“More components always slower” 👉 Oversimplified and incorrect

10. How would you design a headless UI component system?

🔍 Follow-ups

How do you separate logic from UI?

✅ Strong Answer

Provide logic via hooks/context
Let consumers compose UI

<Dropdown>
  <Dropdown.Trigger />
  <Dropdown.Menu />
</Dropdown>

❌ Weak Answer

“Just style components” 👉 Misses headless concept

11. What issues arise with `React.cloneElement` in composition?

🔍 Follow-ups

Alternatives?

✅ Strong Answer

Only works with single child
Overrides props unintentionally
Breaks ref forwarding

❌ Weak Answer

“It’s fine to use everywhere” 👉 Ignores limitations

12. How do keys affect composed components beyond lists?

🔍 Follow-ups

Can keys reset state?

✅ Strong Answer

Keys control identity
Changing key → remount → state reset

❌ Weak Answer

“Keys are only for lists” 👉 Incorrect

13. Design a system to avoid prop drilling in deep composition.

🔍 Follow-ups

When NOT to use context?

✅ Strong Answer

Use context for shared data
Avoid overusing context (performance issues)

❌ Weak Answer

“Always use context” 👉 Ignores trade-offs

14. What is a subtle bug when using function-as-children?

🔍 Follow-ups

Performance implications?

✅ Strong Answer

Function recreated each render
Causes re-renders if not memoized

❌ Weak Answer

“No issues” 👉 Misses real-world impact

15. How do you design a scalable layout system using composition?

🔍 Follow-ups

Slot-based vs children-based?

✅ Strong Answer

Use slots for clarity:

<Layout header={} sidebar={} />

OR compound pattern

❌ Weak Answer

“Just use divs” 👉 Not architectural thinking

16. How would you debug a broken compound component system?

🔍 Follow-ups

What if context is undefined?

✅ Strong Answer

Check provider presence
Validate usage
Add error boundaries

❌ Weak Answer

“Check console logs” 👉 Too shallow

17. When does composition break encapsulation?

🔍 Follow-ups

How do you fix it?

✅ Strong Answer

Exposing internal state setters
Allowing uncontrolled manipulation

👉 Fix via controlled APIs

❌ Weak Answer

“It doesn’t” 👉 Incorrect

18. How does composition interact with Suspense and lazy loading?

🔍 Follow-ups

Where do you place boundaries?

✅ Strong Answer

Wrap composed parts with Suspense
Lazy load heavy children

❌ Weak Answer

“Suspense handles everything” 👉 Oversimplified

19. Design a reusable analytics wrapper using composition.

🔍 Follow-ups

Avoid double tracking?

✅ Strong Answer

Wrap children
Inject event handlers carefully
Deduplicate events

❌ Weak Answer

“Log inside component” 👉 Not reusable/composable

20. What is the hardest part of designing composable systems at scale?

🔍 Follow-ups

How do you measure success?

✅ Strong Answer

Balancing:
- Flexibility
- Constraints
- Performance
Avoiding hidden coupling

❌ Weak Answer

“Just reuse components” 👉 Misses system design depth

🔚 Final Insight

A strong candidate demonstrates:

Deep understanding of React internals
Ability to reason about trade-offs
Awareness of performance & debugging
Skill in designing clean, scalable APIs

​📘 Component Composition in React — Complete Theory Guide

​1. Introduction

​🔹 What is Component Composition?

​🔹 Why is it Important in React?

​🔹 When & Why We Use It

​2. Concepts / Internal Workings

​🔹 2.1 Composition vs Inheritance

​🔹 2.2 The children Prop

​🔹 2.3 Containment Pattern

​🔹 2.4 Specialization Pattern

​🔹 2.5 Multiple Slots (Advanced Composition)

​🔹 2.6 Function as Children (Render Props)

​🔹 2.7 Compound Components Pattern

​🔹 2.8 How It Works Internally in React

​🔹 2.9 Relationship with Other React Features

​✔ Props

​✔ State

​✔ Context API

​✔ Hooks

​3. Syntax & Examples

​🔹 3.1 Basic Composition

​🔹 3.2 Reusable Card Component

​🔹 3.3 Layout Composition

​🔹 3.4 Wrapper for Styling

​🔹 3.5 Render Props Example

​🔹 3.6 Compound Components Example

​4. Edge Cases / Common Mistakes

​⚠️ 4.1 Forgetting to Render children

​⚠️ 4.2 Over-Composition

​⚠️ 4.3 Prop Drilling Instead of Composition

​⚠️ 4.4 Misusing Render Props

​⚠️ 4.5 Breaking Encapsulation

​⚠️ 4.6 Key Issues in Composed Lists

​5. Best Practices

​✅ 5.1 Prefer Composition Over Inheritance

​✅ 5.2 Keep Components Small & Focused

​✅ 5.3 Use Clear Component APIs

​✅ 5.4 Avoid Deep Nesting

​✅ 5.5 Combine Composition with Hooks

​✅ 5.6 Memoization for Performance

​✅ 5.7 Use Compound Components for Complex UI

​✅ 5.8 Use Context to Avoid Prop Drilling

​✅ 5.9 Keep Composition Predictable

​🔚 Summary

​📘 Advanced Interview Questions — Component Composition (React)

​1. What problem does component composition solve that inheritance cannot in React?

​✅ Strong Answer

​💡 Why this matters

​🔁 Alternative

​2. How does React internally handle children during reconciliation?

​✅ Strong Answer

​💡 Key Insight

​⚠️ Pitfall

​3. Why is composition preferred over prop drilling for deep component trees?

​✅ Strong Answer

​💡 Why it works

​🔁 Alternative

​4. What are the trade-offs between children-based composition and explicit props (slots)?

​✅ Strong Answer

​Option 1: children

​Option 2: Named slots

​💡 Trade-off Summary

​5. Explain the Compound Component pattern and its internal coordination mechanism.

​✅ Strong Answer

​💡 Why this works

​⚠️ Trade-off

​6. When would you avoid using composition and prefer a custom hook instead?

​✅ Strong Answer

​💡 Rule

​7. What are the performance implications of deeply composed component trees?

​✅ Strong Answer

​Example

​💡 Optimization

​⚠️ Insight

​8. How can composition lead to unnecessary re-renders, and how do you prevent it?

​✅ Strong Answer

​Fix:

​💡 Core Idea

​9. What is the difference between render props and component composition?

​✅ Strong Answer

📘 Component Composition in React — Complete Theory Guide

1. Introduction

🔹 What is Component Composition?

🔹 Why is it Important in React?

🔹 When & Why We Use It

2. Concepts / Internal Workings

🔹 2.1 Composition vs Inheritance

🔹 2.2 The `children` Prop

🔹 2.3 Containment Pattern

🔹 2.4 Specialization Pattern

🔹 2.5 Multiple Slots (Advanced Composition)

🔹 2.6 Function as Children (Render Props)

🔹 2.7 Compound Components Pattern

🔹 2.8 How It Works Internally in React

🔹 2.9 Relationship with Other React Features

✔ Props

✔ State

✔ Context API

✔ Hooks

3. Syntax & Examples

🔹 3.1 Basic Composition

🔹 3.2 Reusable Card Component

🔹 3.3 Layout Composition

🔹 3.4 Wrapper for Styling

🔹 3.5 Render Props Example

🔹 3.6 Compound Components Example

4. Edge Cases / Common Mistakes

⚠️ 4.1 Forgetting to Render `children`

⚠️ 4.2 Over-Composition

⚠️ 4.3 Prop Drilling Instead of Composition

⚠️ 4.4 Misusing Render Props

⚠️ 4.5 Breaking Encapsulation

⚠️ 4.6 Key Issues in Composed Lists

5. Best Practices

✅ 5.1 Prefer Composition Over Inheritance

✅ 5.2 Keep Components Small & Focused

✅ 5.3 Use Clear Component APIs

✅ 5.4 Avoid Deep Nesting

✅ 5.5 Combine Composition with Hooks

✅ 5.6 Memoization for Performance

✅ 5.7 Use Compound Components for Complex UI

✅ 5.8 Use Context to Avoid Prop Drilling

✅ 5.9 Keep Composition Predictable

🔚 Summary

📘 Advanced Interview Questions — Component Composition (React)

1. What problem does component composition solve that inheritance cannot in React?

✅ Strong Answer

💡 Why this matters

🔁 Alternative

2. How does React internally handle `children` during reconciliation?

✅ Strong Answer

💡 Key Insight

⚠️ Pitfall

3. Why is composition preferred over prop drilling for deep component trees?

✅ Strong Answer

💡 Why it works

🔁 Alternative

4. What are the trade-offs between `children`-based composition and explicit props (slots)?

✅ Strong Answer

Option 1: `children`

Option 2: Named slots

💡 Trade-off Summary

5. Explain the Compound Component pattern and its internal coordination mechanism.

✅ Strong Answer

💡 Why this works

⚠️ Trade-off

6. When would you avoid using composition and prefer a custom hook instead?

✅ Strong Answer

💡 Rule

7. What are the performance implications of deeply composed component trees?

✅ Strong Answer

Example

💡 Optimization

⚠️ Insight

8. How can composition lead to unnecessary re-renders, and how do you prevent it?

✅ Strong Answer

Fix:

💡 Core Idea

9. What is the difference between render props and component composition?

✅ Strong Answer