Composição em Vez de Herança - Construa UIs flexíveis compondo componentes em vez de estendê-los

Receita

// Composição baseada em slots: passe componentes como 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>
  );
}
 
// Uso
<Layout
  header={<TopNav user={currentUser} />}
  sidebar={<SideMenu items={menuItems} />}
>
  <Dashboard data={dashboardData} />
</Layout>

Quando usar isso: Sempre que precisar de um contêiner, layout ou wrapper reutilizável que deva permanecer agnóstico sobre seu conteúdo. Prefira composição em vez de herança em todos os casos no React.

Exemplo Funcional

import { type ReactNode } from "react";
 
// Um componente Card com slots compostos
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>
  );
}
 
// Especialização através de composição, NÃO herança
function ProductCard({ product }: { product: Product }) {
  return (
    <Card
      variant="elevated"
      media={<img src={product.image} alt={product.name} />}
      actions={
        <>
          <button className="btn-secondary">Salvar</button>
          <button className="btn-primary">Adicionar ao Carrinho</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;
}

O que isso demonstra:

• Padrão de slot via props ReactNode nomeadas (media, actions, children)
• Especialização ao envolver um componente genérico (Card) dentro de um específico do domínio (ProductCard)
• Zero herança - ProductCard não é uma subclasse de Card

Mergulho Profundo

Como Funciona

• Componentes React são funções que retornam JSX. Não há hierarquia de classes para estender.
• children é a primitiva de composição principal - qualquer JSX aninhado dentro de um componente é passado como props.children.
• Slots nomeados (props tipadas como ReactNode) permitem injetar conteúdo em posições específicas dentro do layout de um componente.
• A especialização é alcançada criando um novo componente que renderiza um componente geral com props específicas pré-preenchidas.
• A contenção é alcançada por componentes que não conhecem seus children com antecedência e usam {children} como um placeholder.

Parâmetros e Valores de Retorno

Variações

Padrão de injeção de componente - passe um tipo de componente em vez de um elemento renderizado:

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

Composição de Provider - achate múltiplos providers de contexto aninhados:

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

Notas de TypeScript

• Use ReactNode para slots que aceitam qualquer conteúdo renderizável (strings, elementos, fragmentos, null).
• Use React.ComponentType<P> quando precisar passar um componente que será instanciado com props específicas.
• Use ReactElement apenas quando precisar restringir a elementos JSX reais (excluindo strings e números).
• Composição genérica (List<T>) preserva a segurança de tipo através da fronteira do componente.

Armadilhas

• Uso excessivo de children para múltiplos slots - Ao passar tudo como children, você perde o controle sobre o posicionamento. Correção: Use props ReactNode nomeadas para áreas de conteúdo distintas.

• Prop drilling através de camadas compostas - Composição profunda pode levar a passar props através de muitos níveis. Correção: Use contexto para preocupações verdadeiramente transversais e mantenha a composição superficial.

• Quebra da memoização com slots JSX inline - Passar <Component /> inline como uma prop cria uma nova referência de elemento a cada renderização. Correção: Eleve o conteúdo do slot estático para fora da renderização ou envolva com useMemo para árvores caras.

• Confundir especialização com configuração - Criar um novo componente apenas para definir algumas props é aceitável; criar um wrapper que re-expõe todas as props originais é um sinal de que você precisa de composição, não de wrapping. Correção: Use o componente original diretamente e passe as props no local de chamada.

Alternativas

FAQs

// Elemento renderizado: você passa JSX
<Card media={<img src={url} alt="foto" />} />
 
// Injeção de componente: você passa um tipo de componente
<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>
  );
}

Relacionado

• Render Props - Quando slots precisam de acesso ao estado interno do componente
• Compound Components - Componentes multipartes que compartilham estado implícito
• Context Patterns - Evitando prop drilling em árvores profundamente compostas