Composição versus herança

O React prefere composição

Na programação orientada a objetos clássica, para reutilizar comportamento usa-se a herança: uma classe BotaoVermelho extends Botao. O React não segue esse caminho. A forma de reutilizar e especializar no React é a composição: você constrói componentes combinando outros componentes e passando conteúdo a eles via children ou via slots.

// Em vez de "herdar" de Dialogo, você o COMPÕE:
function DialogoBoasVindas() {
  return (
    <Dialogo titulo="Bem-vindo">
      <p>Obrigado por se cadastrar.</p>
    </Dialogo>
  );
}

DialogoBoasVindas é um caso especializado de Dialogo, mas obtido preenchendo seus buracos, não estendendo uma classe. A documentação oficial do React resume assim: não encontramos casos em que recomendaríamos criar hierarquias de herança de componentes.

Compound components (em alto nível)

Quando várias peças trabalham juntas e compartilham estado, surge um padrão de composição mais rico: os compound components ("componentes compostos"). São um componente pai e vários filhos pensados para serem usados juntos:

<Tabs>
  <Tab titulo="Perfil">...</Tab>
  <Tab titulo="Ajustes">...</Tab>
</Tabs>

Tabs coordena qual aba está ativa; cada Tab é uma peça que só faz sentido dentro de Tabs. O usuário compõe a interface declarando as peças, e o pai cuida da lógica compartilhada (normalmente com createContext, que você verá mais adiante).

Ideia-chave: no React você compõe interfaces como se fossem peças de Lego. Antes de pensar em "herdar", pense "qual componente envolve qual?" e "o que passo a ele via children ou via seus slots?".