Skip to main content

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

ApproachFlexibilityReadabilityControl
childrenHighMediumLow
slotsMediumHighHigh
👉 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

PatternFlexibilityComplexity
CompositionMediumLow
Render PropsHighHigher

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

​
✅ Strong Answer

Problem: 
<Card>
  <RandomComponent />
</Card>
No guarantees of structure.

​
Solutions:

  1. Runtime validation:
React.Children.forEach(children, child => {
  if (child.type !== AllowedComponent) {
    throw new Error("Invalid child");
  }
});
  1. TypeScript constraints
  2. 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

TypeControlComplexity
ControlledHighHigher
UncontrolledLowSimpler

​
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:
  1. Trace props flow
  2. Use React DevTools (component tree)
  3. Check memoization issues
  4. 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)

  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

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>

​
🧩 11. Tooltip Wrapper (Composition Control)

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

​
🧩 14. Portal-Based Modal System

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

​
🧩 1. Headless Dropdown System (Composable API)

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

  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

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

  1. Use createPortal
  2. Manage modal stack
  3. 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

  1. Create field registry
  2. Use context for state
  3. 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

​
🧩 20. Nested Menu System

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

​
1. Design a flexible Modal API using composition. What trade-offs would you consider?

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

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

​
❌ Weak Answer

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

​
5. Design a Tabs system using composition. How do you handle state sharing?

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