Composición frente a herencia

React prefiere la composición

En la programación orientada a objetos clásica, para reutilizar comportamiento se usa la herencia: una clase BotonRojo extends Boton. React no sigue ese camino. La forma de reutilizar y especializar en React es la composición: construyes componentes combinando otros componentes y pasándoles contenido por children o por slots.

// En vez de "heredar" de Dialogo, lo COMPONES:
function DialogoBienvenida() {
  return (
    <Dialogo titulo="Bienvenido">
      <p>Gracias por registrarte.</p>
    </Dialogo>
  );
}

DialogoBienvenida es un caso especializado de Dialogo, pero logrado rellenando sus huecos, no extendiendo una clase. La documentación oficial de React lo resume así: no hemos encontrado casos en los que recomendemos crear jerarquías de herencia de componentes.

Compound components (a alto nivel)

Cuando varias piezas trabajan juntas y comparten estado, surge un patrón de composición más rico: los compound components ("componentes compuestos"). Son un componente padre y varios hijos pensados para usarse juntos:

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

Tabs coordina cuál pestaña está activa; cada Tab es una pieza que solo tiene sentido dentro de Tabs. El usuario compone la interfaz declarando las piezas, y el padre se encarga de la lógica compartida (normalmente con createContext, que verás más adelante).

Idea clave: en React compones interfaces como si fueran piezas de Lego. Antes de pensar en "heredar", piensa en "¿qué componente envuelve a cuál?" y "¿qué le paso por children o por sus slots?".