What is the Compound Components pattern?

Compound components let users compose UI naturally (Tabs.List, Tabs.Trigger) instead of passing 20 props to one component. State stays internal via Context; the API stays flexible and readable.

Controlled vs uncontrolled components — when to use each?

Controlled components use React state — predictable, ideal for validation and real-time updates. Uncontrolled use refs/DOM state — simpler and faster for basic inputs and file uploads. Production apps often mix both.

Render Props vs Custom Hooks — which is preferred?

Custom hooks are the modern approach. They offer easier composition, better TypeScript support, and cleaner syntax (const data = useHook()) vs render prop callbacks. Prefer hooks over render props for sharing logic.

What are Error Boundaries and why use them?

Error boundaries are class components that catch render errors in children — hooks cannot catch these. They prevent full app crashes and show fallback UI. Wrap production apps, especially around API-heavy sections.

React Design Patterns

Compound components, custom hooks, error boundaries — patterns SDE-2 interviews expect.

Module 13 · React Design Patterns

Compound components, controlled vs uncontrolled, render props, custom hooks, HOCs, provider pattern, error boundaries, portals, and state machines.

React design patterns for reusable, maintainable components: compound components, controlled vs uncontrolled, render props, custom hooks, container vs presentational, HOCs, provider pattern, error boundaries, Suspense, memoization, portals, and state machines.

About this module

React design patterns are a staple SDE-2 topic — interviews expect you to explain when to use compound components vs prop drilling, controlled vs uncontrolled inputs, and why custom hooks replaced HOCs and render props.

This module covers all 10 core patterns plus advanced techniques: Suspense, memoization, portals, and state machines — with code examples and a when-to-use guide.

Patterns are tools, not rules — you will learn which pattern solves prop drilling, repeated logic, cross-cutting auth, modal rendering, and complex multi-step flows without over-engineering simple components.

All 10 core patterns plus Suspense, memoization, portals, and XState state machines — each with code examples, a when-to-use table, and 30 interview questions from compound components to error boundaries.

Why this matters

Design pattern questions appear in every mid-to-senior React interview. You must explain compound components vs prop hell, why hooks replaced HOCs, how to prevent Context re-renders, and when to reach for state machines — not just name patterns. The best answers tie each pattern to a specific problem it solves.

Key topics covered

Compound Components
Controlled vs Uncontrolled
Render Props
Custom Hooks
Container vs Presentational
Layout Pattern
Conditional Rendering
Higher Order Components
Provider Pattern
Error Boundaries
Suspense
Memoization
Portals
State Machines

Where you'll use it

Building flexible Tabs/Accordion with compound components
Extracting shared auth logic into a custom useAuth hook
Wrapping API-heavy sections with error boundaries
Rendering modals via portals outside nested DOM
Choosing HOC vs render props vs hooks for shared behavior

What Are React Design Patterns?

Established practices for reusable, maintainable, scalable components.

React Design Patterns are established practices and solutions for building reusable, maintainable, and scalable React components. They solve common problems and improve code quality.

•Componentization — divide interface into reusable components
•Conditional rendering — display different UI based on state/props
•State management — choose between Redux, Context API, etc.
•Component communication — props, events, or context
•Performance optimization — optimize rendering and state updates

Compound Components Pattern

Compose UI naturally instead of stuffing 20 props into one component.

•Flexible API while keeping state management internal
•Clean, readable code — avoids prop hell
•Best for Tabs, Dropdowns, Accordion

// ❌ BAD — Too many props
<Tabs
  activeTab="home"
  onTabChange={handleTabChange}
  tabs={["home", "profile"]}
  orientation="horizontal"
  size="medium"
/>

// ✅ GOOD — Compound Components
<Tabs>
  <Tabs.List>
    <Tabs.Trigger value="home">Home</Tabs.Trigger>
    <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="home">Home</Tabs.Content>
  <Tabs.Content value="profile">Profile</Tabs.Content>
</Tabs>

const TabsContext = createContext(null);

function Tabs({ children }) {
  const [activeTab, setActiveTab] = useState("home");
  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      {children}
    </TabsContext.Provider>
  );
}

function TabsTrigger({ value, children }) {
  const { activeTab, setActiveTab } = useContext(TabsContext);
  return (
    <button
      className={activeTab === value ? "active" : ""}
      onClick={() => setActiveTab(value)}
    >
      {children}
    </button>
  );
}

Tabs.List = TabsList;
Tabs.Trigger = TabsTrigger;
Tabs.Content = TabsContent;

Controlled vs Uncontrolled Components

React state vs DOM state for form inputs.

Aspect	Controlled	Uncontrolled
State	React state	DOM state
Predictable	Yes	No
Performance	Slower (re-renders)	Faster
Use Case	Validation, real-time	Simple inputs, file uploads

// Controlled — value tied to React state
function ControlledInput() {
  const [value, setValue] = useState("");
  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

// Uncontrolled — DOM manages state via ref
function UncontrolledInput() {
  const inputRef = useRef(null);
  const handleSubmit = () => console.log(inputRef.current.value);
  return <input defaultValue="Hello" ref={inputRef} />;
}

Rule of thumb: Controlled = predictable. Uncontrolled = simpler and faster. Many production apps mix both (semi-controlled).

Render Props Pattern

Share logic without forcing a specific UI.

Abstract logic but let the consumer decide the UI. Useful when multiple components need the same behavior with different rendering.

function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMove = (e) =>
      setPosition({ x: e.clientX, y: e.clientY });
    window.addEventListener("mousemove", handleMove);
    return () => window.removeEventListener("mousemove", handleMove);
  }, []);

  return render(position);
}

// Usage
<MouseTracker
  render={({ x, y }) => <p>Mouse position: {x}, {y}</p>}
/>

Modern alternative: Custom Hooks — prefer hooks over render props.

Custom Hooks Pattern

Extract business logic into reusable hooks.

•Keeps components small, clean, and testable
•Share logic between components without copying code
•Use when repeated logic appears or component exceeds ~300 lines

function useAuth() {
  const [user, setUser] = useState(null);

  const login = (creds) => setUser(creds.user);
  const logout = () => setUser(null);

  return { user, login, logout };
}

function LoginForm() {
  const { user, login } = useAuth();
  const handleSubmit = (e) => {
    login({ email: e.email, password: e.password });
  };
  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}

Container vs Presentational Components

Separate logic from UI rendering.

•Container — handles logic, data fetching, state
•Presentational — handles UI, rendering only

// Container — logic + data
function UserListContainer() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch("/api/users").then((res) => setUsers(res.data));
  }, []);
  return <UserList users={users} />;
}

// Presentational — UI only
function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Modern approach: use Custom Hooks instead of container components.

Layout Pattern

Components that define structure and wrap children.

function Layout({ children }) {
  return (
    <div className="layout">
      <header className="header">Header</header>
      <main className="main">{children}</main>
      <footer className="footer">Footer</footer>
    </div>
  );
}

// Usage
<Layout>
  <Dashboard />
</Layout>

Conditional Rendering Pattern

Display different interfaces based on state or props.

// 1. If-else
if (isLoading) return <Loading />;
return <Content />;

// 2. Ternary
return isLoading ? <Loading /> : <Content />;

// 3. Logical AND
return showContent && <Content />;

// 4. Switch
switch (status) {
  case "loading": return <Loading />;
  case "success": return <Success />;
  case "error": return <Error />;
  default: return null;
}

Higher Order Components (HOC)

Wrap a component to inject additional logic.

function withAuth(WrappedComponent) {
  return function AuthComponent(props) {
    const { user } = useAuth();
    if (!user) return <LoginPage />;
    return <WrappedComponent {...props} user={user} />;
  };
}

const Dashboard = withAuth(function Dashboard({ user }) {
  return <div>Welcome {user.name}</div>;
});

Modern alternative: Custom Hooks — HOCs add wrapper nesting and are harder to type in TypeScript.

Provider Pattern

Share data across components without prop drilling.

const ThemeContext = createContext(null);

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const { theme } = useContext(ThemeContext);
  return <button className={theme}>Click</button>;
}

Context selectors avoid re-renders — only subscribe to the slice you need:

const name = useContextSelector(UserContext, (v) => v.name);

Error Boundaries Pattern

Catch render errors in child components.

Hooks cannot catch render errors — only class-based error boundaries can. Always wrap production apps, especially API-heavy sections.

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong</h2>;
    }
    return this.props.children;
  }
}

<ErrorBoundary>
  <Dashboard />
</ErrorBoundary>

Advanced Patterns

Suspense, memoization, portals, and state machines.

Suspense for Data Fetching

<Suspense fallback={<Loading />}>
  <Profile />
</Suspense>

Memoization

const result = useMemo(() => heavyCalc(data), [data]);
const handleClick = useCallback(() => doSomething(val), [val]);

Performance boost — but don't overdo it.

Portals

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    document.getElementById("modal-root")
  );
}

Render modals and tooltips outside nested DOM — avoids CSS z-index hacks.

State Machines (XState)

const toggleMachine = createMachine({
  initial: "off",
  states: {
    off: { on: { TOGGLE: "on" } },
    on: { on: { TOGGLE: "off" } },
  },
});

function Toggle() {
  const [state, send] = useMachine(toggleMachine);
  return (
    <button onClick={() => send("TOGGLE")}>
      {state.matches("on") ? "ON" : "OFF"}
    </button>
  );
}

Perfect for forms, multi-step flows, and state explosion.

When to Use Each Pattern

Match the pattern to the problem.

Problem	Pattern
Too many props	Compound Components
Repeated logic	Custom Hooks
Painful re-renders	Context Selectors + Memoization
Complex flows	State Machines
Errors lurking	Error Boundaries
Modal/CSS issues	Portals
Share logic without UI	Render Props
Avoid prop drilling	Provider Pattern
Loading states	Suspense

Interview Takeaways

What SDE-2 interviewers expect you to know.

•Compound components — flexible API, internal state, no prop hell
•Controlled vs uncontrolled — predictable vs simpler; mix in production
•Custom hooks replaced HOCs and render props — prefer hooks today
•Error boundaries — class only, catch render errors, wrap API sections
•Context selectors — prevent unnecessary re-renders
•useMemo/useCallback — memoize expensive work, don't over-memoize
•Portals — modals/tooltips outside DOM hierarchy
•State machines — XState for complex multi-step flows

Frequently Asked Questions

Common interview questions about React design patterns.

// ❌ BAD — Too many props <Tabs activeTab="home" onTabChange={handleTabChange} tabs={["home", "profile"]} orientation="horizontal" size="medium" /> // ✅ GOOD — Compound Components <Tabs> <Tabs.List> <Tabs.Trigger value="home">Home</Tabs.Trigger> <Tabs.Trigger value="profile">Profile</Tabs.Trigger> </Tabs.List> <Tabs.Content value="home">Home</Tabs.Content> <Tabs.Content value="profile">Profile</Tabs.Content> </Tabs>

Aspect

Controlled

Uncontrolled

State

React state

DOM state

Predictable

Yes

Performance

Slower (re-renders)

Faster

Use Case

Validation, real-time

Simple inputs, file uploads

// Controlled — value tied to React state function ControlledInput() { const [value, setValue] = useState(""); return ( <input value={value} onChange={(e) => setValue(e.target.value)} /> ); } // Uncontrolled — DOM manages state via ref function UncontrolledInput() { const inputRef = useRef(null); const handleSubmit = () => console.log(inputRef.current.value); return <input defaultValue="Hello" ref={inputRef} />; }

// Container — logic + data function UserListContainer() { const [users, setUsers] = useState([]); useEffect(() => { fetch("/api/users").then((res) => setUsers(res.data)); }, []); return <UserList users={users} />; } // Presentational — UI only function UserList({ users }) { return ( <ul> {users.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> ); }

function Layout({ children }) { return ( <div className="layout"> <header className="header">Header</header> <main className="main">{children}</main> <footer className="footer">Footer</footer> </div> ); } // Usage <Layout> <Dashboard /> </Layout>

// 1. If-else if (isLoading) return <Loading />; return <Content />; // 2. Ternary return isLoading ? <Loading /> : <Content />; // 3. Logical AND return showContent && <Content />; // 4. Switch switch (status) { case "loading": return <Loading />; case "success": return <Success />; case "error": return <Error />; default: return null; }

class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; } render() { if (this.state.hasError) { return <h2>Something went wrong</h2>; } return this.props.children; } } <ErrorBoundary> <Dashboard /> </ErrorBoundary>

Problem

Pattern

Too many props

Compound Components

Repeated logic

Custom Hooks

Painful re-renders

Context Selectors + Memoization

Complex flows

State Machines

Errors lurking

Error Boundaries

Modal/CSS issues

Portals

Share logic without UI

Render Props

Avoid prop drilling

Provider Pattern

Loading states

Suspense

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

What Are React Design Patterns?

Compound Components Pattern

Controlled vs Uncontrolled Components

Render Props Pattern

Custom Hooks Pattern

Container vs Presentational Components

Layout Pattern

Conditional Rendering Pattern

Higher Order Components (HOC)

Provider Pattern

Error Boundaries Pattern

Advanced Patterns

Suspense for Data Fetching

Memoization

Portals

State Machines (XState)

When to Use Each Pattern

Interview Takeaways

Frequently Asked Questions

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

What Are React Design Patterns?

Compound Components Pattern

Controlled vs Uncontrolled Components

Render Props Pattern

Custom Hooks Pattern

Container vs Presentational Components

Layout Pattern

Conditional Rendering Pattern

Higher Order Components (HOC)

Provider Pattern

Error Boundaries Pattern

Advanced Patterns

Suspense for Data Fetching

Memoization

Portals

State Machines (XState)

When to Use Each Pattern

Interview Takeaways

Frequently Asked Questions