Part 14: Component Composition vs Inheritance: Slot Patterns

React has a powerful composition model. The React core team recommends composition over inheritance to reuse code between components.

1. Why Not Inheritance?

In Object-Oriented Programming, classes often extend other classes (class WelcomeDialog extends Dialog). In React, components rarely need inheritance hierarchies. Anything that can be achieved via inheritance can be achieved more flexibly and cleanly via props, composition, and children.

2. Containment & Named Slots Pattern

Sometimes components don't know their children ahead of time (e.g., Sidebar, Dialog, SplitPane). You can pass arbitrary JSX through any named prop:

export default function SplitPane({ leftPanel, rightPanel }) {
  return (
    <div className="flex h-screen">
      <aside className="w-1/4 bg-gray-100 p-4 border-r">
        {leftPanel}
      </aside>
      <main className="w-3/4 p-6">
        {rightPanel}
      </main>
    </div>
  );
}

// Consuming the SplitPane:
export default function AppLayout() {
  return (
    <SplitPane
      leftPanel={<NavigationMenu activeItem="dashboard" />}
      rightPanel={<DashboardAnalytics />}
    />
  );
}

3. Specialization Pattern

A generic component (like Dialog) can be specialized by wrapping it inside another component:

function Dialog({ title, message, actionButton }) {
  return (
    <div className="modal-backdrop">
      <div className="modal-content">
        <h2>{title}</h2>
        <p>{message}</p>
        <div className="actions">{actionButton}</div>
      </div>
    </div>
  );
}

export function DeleteConfirmationDialog({ onConfirm, onCancel }) {
  return (
    <Dialog
      title="Delete Project?"
      message="This action cannot be undone. All data will be permanently removed."
      actionButton={
        <div className="flex gap-2">
          <button onClick={onCancel} className="btn-secondary">Cancel</button>
          <button onClick={onConfirm} className="btn-danger">Confirm Delete</button>
        </div>
      }
    />
  );
}

Key Takeaways

• Favor composition over class inheritance.
• Use props.children and named JSX props for flexible component slots.
• Build generic primitive components and specialize them with configuration props.

In Part 15, we enter Module 3 to begin our deep dive into React Hooks!