Composition Over Inheritance - Build flexible UIs by composing components instead of extending them

Recipe

// Slot-based composition: pass components as props
function Layout({ header, sidebar, children }: {
  header: React.ReactNode;
  sidebar: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <div className="grid grid-cols-[240px_1fr] grid-rows-[64px_1fr]">
      <header className="col-span-2">{header}</header>
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}
 
// Usage
<Layout
  header={<TopNav user={currentUser} />}
  sidebar={<SideMenu items={menuItems} />}
>
  <Dashboard data={dashboardData} />
</Layout>

When to reach for this: Whenever you need a reusable container, layout, or wrapper that should remain agnostic about its content. Prefer composition over inheritance in every case in React.

Working Example

import { type ReactNode } from "react";
 
// A Card component with composable slots
interface CardProps {
  media?: ReactNode;
  actions?: ReactNode;
  children: ReactNode;
  variant?: "elevated" | "outlined";
}
 
function Card({ media, actions, children, variant = "outlined" }: CardProps) {
  const base = "rounded-lg overflow-hidden";
  const styles = variant === "elevated"
    ? `${base} shadow-lg bg-white`
    : `${base} border border-gray-200 bg-white`;
 
  return (
    <div className={styles}>
      {media && <div className="aspect-video overflow-hidden">{media}</div>}
      <div className="p-4">{children}</div>
      {actions && (
        <div className="px-4 pb-4 flex gap-2 justify-end">{actions}</div>
      )}
    </div>
  );
}
 
// Specialization through composition, NOT inheritance
function ProductCard({ product }: { product: Product }) {
  return (
    <Card
      variant="elevated"
      media={<img src={product.image} alt={product.name} />}
      actions={
        <>
          <button className="btn-secondary">Save</button>
          <button className="btn-primary">Add to Cart</button>
        </>
      }
    >
      <h3 className="font-semibold">{product.name}</h3>
      <p className="text-gray-600">${product.price}</p>
    </Card>
  );
}
 
interface Product {
  name: string;
  price: number;
  image: string;
}

What this demonstrates:

• Slot pattern via named ReactNode props (media, actions, children)
• Specialization by wrapping a generic component (Card) inside a domain-specific one (ProductCard)
• Zero inheritance - ProductCard is not a subclass of Card

Deep Dive

How It Works

• React components are functions that return JSX. There is no class hierarchy to extend.
• children is the primary composition primitive - any JSX nested inside a component is passed as props.children.
• Named slots (props typed as ReactNode) let you inject content into specific positions within a component's layout.
• Specialization is achieved by creating a new component that renders a general component with specific props pre-filled.
• Containment is achieved by components that don't know their children ahead of time and use {children} as a placeholder.

Parameters & Return Values

Variations

Component injection pattern - pass a component type rather than a rendered element:

interface ListProps<T> {
  items: T[];
  renderItem: React.ComponentType<{ item: T }>;
}
 
function List<T>({ items, renderItem: Item }: ListProps<T>) {
  return (
    <ul>
      {items.map((item, i) => (
        <li key={i}><Item item={item} /></li>
      ))}
    </ul>
  );
}

Provider composition - flatten nested context providers:

function AppProviders({ children }: { children: ReactNode }) {
  return (
    <ThemeProvider>
      <AuthProvider>
        <QueryProvider>
          {children}
        </QueryProvider>
      </AuthProvider>
    </ThemeProvider>
  );
}

TypeScript Notes

• Use ReactNode for slots that accept any renderable content (strings, elements, fragments, null).
• Use React.ComponentType<P> when you need to pass a component that will be instantiated with specific props.
• Use ReactElement only when you need to narrow to actual JSX elements (excluding strings and numbers).
• Generic composition (List<T>) preserves type safety through the component boundary.

Gotchas

• Overusing children for multiple slots - When you pass everything as children, you lose control over placement. Fix: Use named ReactNode props for distinct content areas.

• Prop drilling through composed layers - Deep composition can lead to passing props through many levels. Fix: Use context for truly cross-cutting concerns, and keep composition shallow.

• Breaking memoization with inline JSX slots - Passing <Component /> inline as a prop creates a new element reference each render. Fix: Lift static slot content outside the render or wrap with useMemo for expensive trees.

• Confusing specialization with configuration - Creating a new component just to set a few props is fine; creating a wrapper that re-exposes all original props is a sign you need composition, not wrapping. Fix: Use the original component directly and pass props at the call site.

Alternatives

FAQs

// Rendered element: you pass JSX
<Card media={<img src={url} alt="photo" />} />
 
// Component injection: you pass a component type
<List items={data} renderItem={ProductRow} />

function AppProviders({ children }: { children: ReactNode }) {
  return (
    <ThemeProvider>
      <AuthProvider>
        <QueryProvider>
          {children}
        </QueryProvider>
      </AuthProvider>
    </ThemeProvider>
  );
}

interface ListProps<T> {
  items: T[];
  renderItem: React.ComponentType<{ item: T }>;
}
 
function List<T>({ items, renderItem: Item }: ListProps<T>) {
  return <ul>{items.map((item, i) => <li key={i}><Item item={item} /></li>)}</ul>;
}

interface LayoutProps {
  header: ReactNode;
  sidebar: ReactNode;
  children: ReactNode;
}
 
function Layout({ header, sidebar, children }: LayoutProps) {
  return (
    <div>
      <header>{header}</header>
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}

Related

• Render Props - When slots need access to internal component state
• Compound Components - Multi-part components that share implicit state
• Context Patterns - Avoiding prop drilling in deeply composed trees