📘 Component Composition in React — Complete Theory Guide

1. Introduction

🔹 What is Component Composition?

👉 “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>
  );
}

🔹 Why is it Important in React?

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

🔹 When & Why We Use It

• 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

• It creates tight coupling
• Harder to scale and refactor

<ComponentA>
  <ComponentB />
</ComponentA>

🔹 2.2 The children Prop

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

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

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

🔹 2.3 Containment Pattern

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

🔹 2.4 Specialization Pattern

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

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

🔹 2.5 Multiple Slots (Advanced Composition)

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

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

🔹 2.6 Function as Children (Render Props)

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

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

🔹 2.7 Compound Components Pattern

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

🔹 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
}

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

⚠️ 4.2 Over-Composition

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

• Hard debugging
• Poor readability

⚠️ 4.3 Prop Drilling Instead of Composition

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

• Use composition or context

⚠️ 4.4 Misusing Render Props

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

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

⚠️ 4.5 Breaking Encapsulation

<Component internalStateSetter={setState} />

⚠️ 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

• Do one thing well
• Be easily composable

✅ 5.3 Use Clear Component APIs

<Component data1 data2 data3 />

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

✅ 5.4 Avoid Deep Nesting

<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

• React.memo
• useMemo
• useCallback

• Components are deeply composed
• Props rarely change

✅ 5.7 Use Compound Components for Complex UI

• 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

• 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

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

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

• Independent
• Replaceable
• Reusable

💡 Why this matters

🔁 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>

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

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

💡 Key Insight

⚠️ Pitfall

• 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

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

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

<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>

Option 2: Named slots

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

💡 Trade-off Summary

• API clarity
• Design constraints

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

✅ Strong Answer

const TabsContext = React.createContext();

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

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

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

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

const { on, toggle } = useToggle();

💡 Rule

• Composition → UI structure
• Hooks → logic reuse

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

✅ Strong Answer

• 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

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

✅ Strong Answer

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

Fix:

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

const Child = React.memo(...)

💡 Core Idea

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

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

✅ Strong Answer

<Card>
  <RandomComponent />
</Card>

Solutions:

1. Runtime validation:

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

2. TypeScript constraints
3. Compound pattern enforcement

💡 Trade-off

• Flexibility vs Safety

11. Why can overusing composition hurt readability?

✅ Strong Answer

<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

• Composition defines structure
• Context provides data access

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

💡 Insight

• Deep composition → prop drilling

• Decoupled data access

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

✅ Strong Answer

Controlled:

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

Uncontrolled:

<Tabs defaultActive={0} />

💡 Trade-off

14. How do keys affect composed components?

✅ Strong Answer

• Identity
• Reconciliation

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

⚠️ Pitfall

key={index}

• 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>

• 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

<Component setInternalState={setState} />

Problem:

• Leaks internal logic
• Breaks abstraction

💡 Fix

• Callbacks
• Controlled APIs

17. How does composition influence testability?

✅ Strong Answer

• 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

1. Trace props flow
2. Use React DevTools (component tree)
3. Check memoization issues
4. Inspect re-renders

💡 Senior Insight

• Incorrect assumptions about composition boundaries
• Hidden coupling via context

🔚 Final Takeaway

• 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:

✅ Correct Answer: B

✔ Explanation:

• null
• false
• undefined

❌ 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:

✅ Correct Answer: B

✔ Explanation:

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

❌ 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" />
</>

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

Options:

✅ Correct Answer: C

✔ Explanation:

• React uses index-based reconciliation
• Components may retain wrong state

❌ 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:

✅ Correct Answer: A

✔ Explanation:

• Order
• Structure of children

❌ 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:

✅ Correct Answer: D

✔ Explanation:

• A single child
• Multiple children (as array)

❌ 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);
}

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

Options:

✅ Correct Answer: B

✔ Explanation:

❌ 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:

✅ Correct Answer: C

✔ Explanation:

children("data")

❌ 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:

✅ Correct Answer: B

✔ Explanation:

{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:

✅ Correct Answer: C

✔ Explanation:

❌ 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>

Options:

✅ Correct Answer: B

✔ Explanation:

❌ Why others are wrong:

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

11. What happens if context is missing?

<Tab />

Options:

✅ Correct Answer: C

✔ Explanation:

❌ 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:

✅ Correct Answer: D

✔ Explanation:

❌ 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:

✅ Correct Answer: B

✔ Explanation:

❌ 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:

✅ Correct Answer: B

✔ Explanation:

❌ 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:

✅ Correct Answer: B

✔ Explanation:

❌ 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:

✅ Correct Answer: B

✔ Explanation:

❌ Why others are wrong:

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

🔚 Final Insight

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

📘 Component Composition — Advanced Coding Problems (React)

🧩 1. Flexible Layout System (Slots-Based)

🧠 Problem

• Header
• Sidebar
• Content
• Footer

⚙️ 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)

1. Use context to register slots
2. Identify child types via type
3. 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>
  );
}

🧩 2. Modal with Controlled & Uncontrolled Modes

🧠 Problem

• 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

⚙️ 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

• 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

• 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

⚙️ 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

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

<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.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

⚙️ Constraints

• Only render visible items
• Accept child renderer

💡 Solution

• Use render function
• Combine with windowing logic

🧩 10. Theme Provider with Composition

🧠 Problem

💡 Solution

const ThemeContext = React.createContext();

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

🧩 11. Tooltip Wrapper (Composition Control)

🧠 Problem

⚠️ Edge Case

• Child must accept props

💡 Solution

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

🧩 12. Error Boundary Wrapper

🧠 Problem

💡 Solution

• Use class component
• Wrap children

🧩 13. Multi-Step Form Wizard

🧠 Problem

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

💡 Solution

• Track active step via context
• Render one step at a time

🧩 14. Portal-Based Modal System

🧠 Problem

💡 Solution

ReactDOM.createPortal(children, document.body);

🧩 15. Drag-and-Drop Wrapper

🧠 Problem

⚠️ Edge Case

• Child event conflicts

💡 Solution

• Inject handlers via cloning

🧩 16. Layout Switcher (Responsive Composition)

🧠 Problem

💡 Solution

• Conditional composition

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

🧩 17. Notification System (Stacked Composition)

🧠 Problem

💡 Solution

• Context store + dynamic children

🧩 18. Skeleton Loader Wrapper

🧠 Problem

💡 Solution

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

🧩 19. Access-Controlled Route Wrapper

🧠 Problem

💡 Solution

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

🧩 20. Analytics Wrapper (Cross-Cutting Concern)

🧠 Problem

💡 Solution

• Wrap children
• Inject tracking props/events

🔚 Final Takeaway

• 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)

🐞 1. Children Not Rendering

❌ Buggy Code

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

🔍 What’s Wrong

💥 Why It Happens

✅ Fix

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

✅ Best Practice

🐞 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

💥 Why It Happens

✅ Fix

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

✅ Best Practice

🐞 3. State Leakage Due to Missing Keys

❌ Buggy Code

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

🔍 What’s Wrong

💥 Why It Happens

✅ Fix

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

✅ Best Practice

🐞 4. Render Prop Misuse

❌ Buggy Code

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

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

🔍 What’s Wrong

💥 Why It Happens

✅ Fix

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

✅ Best Practice

🐞 5. CloneElement Crash with Multiple Children

❌ Buggy Code

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

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

🔍 What’s Wrong

💥 Why It Happens

✅ Fix

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

✅ Best Practice

🐞 6. Context Undefined in Compound Component

❌ Buggy Code

const TabsContext = React.createContext();

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

<Tab />

🔍 What’s Wrong

💥 Why It Happens

✅ Fix

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

✅ Best Practice

🐞 7. Hidden Re-render Cascade

❌ Buggy Code

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

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

🔍 What’s Wrong

💥 Why It Happens

✅ Fix

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

✅ Best Practice

🐞 8. Incorrect Child Type Assumption

❌ Buggy Code

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

🔍 What’s Wrong

💥 Why It Happens

• strings
• null
• arrays

✅ Fix

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

✅ Best Practice

🐞 9. Function Child Not Called Conditionally

❌ Buggy Code

return children && children(data);

🔍 What’s Wrong

💥 Why It Happens

✅ Fix

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

✅ Best Practice

🐞 10. Overwriting Event Handlers

❌ Buggy Code

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

🔍 What’s Wrong

💥 Why It Happens

✅ Fix

const original = children.props.onClick;

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

✅ Best Practice

🐞 11. Multiple Slot Collision

❌ Buggy Code

slots[child.type.name] = child;

🔍 What’s Wrong

💥 Why It Happens

✅ Fix

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

✅ Best Practice

🐞 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

💥 Why It Happens

✅ Fix

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

✅ Best Practice

🐞 13. Fragment Children Misinterpretation

❌ Buggy Code

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

🔍 What’s Wrong

💥 Why It Happens

✅ Fix

React.Children.toArray(children).length

✅ Best Practice

🐞 14. Conditional Rendering Losing State

❌ Buggy Code

{show && <Child />}

🔍 What’s Wrong

💥 Why It Happens

✅ Fix

<Child hidden={!show} />

✅ Best Practice

🐞 15. Deep Composition Causing Prop Drilling

❌ Buggy Code

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

🔍 What’s Wrong

💥 Why It Happens

✅ Fix

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

✅ Best Practice

🐞 16. Unstable Child Identity

❌ Buggy Code

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

🔍 What’s Wrong

💥 Why It Happens

✅ Fix

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

✅ Best Practice

🐞 17. Unexpected Rendering Order

❌ Buggy Code

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

🔍 What’s Wrong

💥 Why It Happens

✅ Fix

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

✅ Best Practice

🐞 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

💥 Why It Happens

✅ Fix

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

✅ Best Practice

🔚 Final Takeaway

• ❌ 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)

🧩 1. Headless Dropdown System (Composable API)

🧠 Problem

• 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

1. Create context
2. Register items dynamically
3. Handle keyboard events globally
4. Use refs for focus control

🧩 2. Headless Modal System with Portal

🧠 Problem

• 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

1. Use createPortal
2. Manage modal stack
3. Trap focus with refs

🧩 3. Dynamic Form Builder (Schema + Composition)

🧠 Problem

• 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

1. Create field registry
2. Use context for state
3. Isolate updates per field

🧩 4. Compound Tabs with Lazy Rendering

🧠 Problem

⚠️ 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

• 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

⚠️ 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

⚠️ 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

⚠️ Edge Cases

• Skippable steps
• Async validation

🏗 Architecture

<Wizard>
  <Step />
</Wizard>

🛠 Approach

• Track current step
• Share state via context

🧩 9. Access-Control Wrapper System

🧠 Problem

⚠️ Edge Cases

• Nested permissions
• Async auth

🏗 Architecture

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

🛠 Approach

• Context-based auth
• Conditional rendering