Qué devuelve realmente un componente

Preguntale a diez personas qué devuelve un componente de React y nueve te van a decir «HTML». Es entendible: eso es lo que parece cuando lo escribís. Pero es falso, y esa falsedad es la raíz de casi todo lo que después no cierra.

Un componente es una función común de JavaScript que devuelve un objeto plano. Nada más. Ese objeto no sabe nada del DOM, no puede pintarse, y no tiene ningún método útil. Es una descripción.

Sacale el azúcar al JSX

Esto que escribís todos los días:

1function Saludo({ nombre }) {2  return <h1 className="titulo">Hola, {nombre}</h1>;3}

El compilador lo transforma en esto antes de que el navegador vea una sola línea. JSX no es parte de JavaScript: es una sintaxis que Babel o SWC traducen a llamadas de función.

1function Saludo({ nombre }) {2  return jsx("h1", { className: "titulo", children: ["Hola, ", nombre] });3}

Y lo que esa llamada devuelve es literalmente esto:

1{2  $$typeof: Symbol(react.transitional.element),3  type: "h1",4  key: null,5  props: {6    className: "titulo",7    children: ["Hola, ", "Ana"]8  }9}

Un objeto congelado, sin métodos, sin referencia a ningún nodo del DOM. Podés hacerle console.log y verlo. Podés serializarlo. No hace nada por sí solo.

Por qué esto no es un detalle

Comparar objetos planos es barato. Tocar el DOM es caro — puede forzar recálculos de layout, repintados, y en el peor caso trabar el hilo principal. Si React trabajara directamente sobre el DOM, cada cambio de estado sería una negociación con el navegador.

Al trabajar sobre descripciones, React puede hacer cosas que serían impensables con nodos reales: construir un árbol entero en memoria, compararlo, tirarlo a la basura si llegó algo más urgente, y volver a empezar. Nada de eso se ve, porque nada de eso tocó la pantalla.

Elemento, componente, instancia

Tres palabras que se usan como sinónimos y no lo son:

• Componente es la función. Saludo. La escribís una vez.
• Elemento es el objeto que describe una aparición de ese componente. <Saludo nombre="Ana" />. Es descartable y se crea de nuevo en cada render.
• Instancia es el fiber: la estructura interna donde React guarda el estado de esa aparición concreta. Sobrevive entre renders. Nunca la tocás directamente.

Que el elemento sea descartable y la instancia persistente es exactamente lo que permite que tu componente sea una función pura y que igual tenga memoria. El estado no vive en tu función: vive al lado.

1const a = <Saludo nombre="Ana" />;2const b = Saludo({ nombre: "Ana" });

Lo que te llevás

Un componente devuelve una descripción, no una interfaz. Todo lo que hace React — reconciliar, memoizar, interrumpir, priorizar — es posible porque trabaja sobre objetos baratos y no sobre el DOM. En la próxima lección vamos a ver dónde guarda React el estado, ya que las funciones que escribís no tienen memoria propia.