React
Diferencia elementos React, nodos y componentes, y explica cómo fragments y composición permiten construir árboles de interfaz sin wrappers innecesarios.
Un elemento de React es una descripción inmutable de una parte de la interfaz. Los componentes producen elementos; React combina esos elementos en un árbol; los fragments permiten agruparlos sin introducir un nodo DOM innecesario.
Cuando escribes JSX no estás creando directamente nodos del DOM. Estás construyendo valores que describen qué quieres renderizar.
const title = <h1>Productos</h1>;title contiene un elemento de React. Conceptualmente incluye información como:
h1.key, cuando existe.React utiliza esa descripción durante el render para construir el siguiente árbol de interfaz. Más adelante, durante el commit, React DOM aplica al navegador únicamente los cambios necesarios.
JSX
↓
elementos de React
↓
árbol calculado durante render
↓
reconciliación con el árbol anterior
↓
commit sobre el DOMUna interfaz declarativa necesita una representación intermedia. Si cada componente modificara el DOM directamente, React no podría comparar el resultado anterior con el siguiente ni coordinar actualizaciones entre componentes.
Los elementos permiten separar dos fases:
Por eso ejecutar un componente no equivale a insertar HTML inmediatamente.
function ProductTitle({ name }: { name: string }) {
return <h2>{name}</h2>;
}La función devuelve una descripción. React conserva el control sobre cuándo ejecutarla, cómo relacionarla con renders anteriores y qué cambio termina llegando al DOM.
Estos conceptos suelen confundirse.
Es una función o clase que React puede ejecutar para calcular una parte del árbol.
function Header() {
return <header>Mi tienda</header>;
}Es el valor descriptivo producido por JSX.
const headerElement = <Header />;Aquí el tipo del elemento es Header. React todavía debe ejecutar ese componente para conocer su resultado interno.
Es la entidad real creada en el navegador, como un HTMLElement.
<Header />
↓ elemento cuyo tipo es Header
Header()
↓ devuelve <header>
Elemento host
↓ commit de React DOM
HTMLElement realUn elemento de React es ligero y descriptivo. No expone APIs como focus(), getBoundingClientRect() o addEventListener(). Para interactuar con un nodo real utilizas refs o APIs del navegador en el momento apropiado.
El tipo del elemento determina qué debe hacer React.
const nativeElement = <button type="button">Guardar</button>;
const customElement = <SaveButton />;button, representa un elemento host del entorno web.SaveButton, representa un componente que React debe ejecutar.function SaveButton() {
return <button type="button">Guardar</button>;
}React puede atravesar varios componentes antes de llegar a elementos host que React DOM pueda materializar.
Una vez creado un elemento, no debes modificarlo. Para obtener una interfaz diferente produces un elemento nuevo mediante otro render.
const element = <ProductCard name="Teclado" />;No existe un flujo normal en el que cambies internamente element.props.name. En cambio, el padre vuelve a renderizar:
<ProductCard name={selectedProduct.name} />Cuando selectedProduct cambia, React recibe una nueva descripción. La reconciliación decide qué preservar y qué actualizar.
Esta inmutabilidad simplifica el razonamiento: cada render representa una fotografía de la interfaz para unas entradas concretas.
Un componente no está limitado a devolver una única etiqueta visible. Puede devolver:
null para no producir contenido visible.function Result({ value }: { value: number | null }) {
if (value === null) return null;
return value;
}Los booleanos, null y undefined no producen contenido visible como hijos. Los strings y números sí.
Una expresión debe producir un único valor. Este retorno no es válido:
function Profile() {
return (
<h1>Nicolás</h1>
<p>Desarrollador</p>
);
}Son dos expresiones JSX hermanas sin un contenedor común. Puedes usar un elemento semántico:
function Profile() {
return (
<section>
<h1>Nicolás</h1>
<p>Desarrollador</p>
</section>
);
}O un fragment cuando no necesitas un nodo real:
function Profile() {
return (
<>
<h1>Nicolás</h1>
<p>Desarrollador</p>
</>
);
}Un fragment es un componente integrado de React que agrupa varios hijos sin añadir un wrapper al DOM.
function ProductInformation() {
return (
<>
<h2>Teclado mecánico</h2>
<p>Switches intercambiables.</p>
</>
);
}El DOM resultante contiene el h2 y el p como hermanos. No aparece un nodo Fragment.
Árbol React
Fragment
├── h2
└── p
DOM
h2
pEl fragment sí existe dentro del árbol React como agrupación lógica, aunque no cree un elemento HTML.
Una fila de tabla debe contener celdas directamente:
function ProductCells({ product }: { product: Product }) {
return (
<>
<td>{product.name}</td>
<td>{product.price}</td>
</>
);
}
function ProductRow({ product }: { product: Product }) {
return (
<tr>
<ProductCells product={product} />
</tr>
);
}Añadir un div entre tr y td produciría HTML inválido.
Grid y Flexbox calculan sus hijos directos. Un wrapper innecesario puede cambiar el layout:
function ToolbarActions() {
return (
<>
<button type="button">Editar</button>
<button type="button">Eliminar</button>
</>
);
}El fragment permite mantener una responsabilidad de componente sin inventar una etiqueta sin significado.
La forma corta sirve para la mayoría de agrupaciones:
<>
<Header />
<MainContent />
</>La forma explícita permite pasar una key:
import { Fragment } from "react";
function Glossary({ entries }: { entries: Entry[] }) {
return (
<dl>
{entries.map((entry) => (
<Fragment key={entry.id}>
<dt>{entry.term}</dt>
<dd>{entry.definition}</dd>
</Fragment>
))}
</dl>
);
}La key identifica el grupo completo formado por dt y dd. No puedes escribir key en <>...</>.
Las APIs experimentales o Canary relacionadas con refs de fragments no deben tratarse como comportamiento estable general. Para código estable, piensa principalmente en fragments como agrupaciones sin nodo DOM y con soporte de key en su forma explícita.
No utilices un fragment solo para evitar elegir HTML correcto.
function Navigation() {
return (
<>
<a href="/">Inicio</a>
<a href="/portfolio">Portafolio</a>
</>
);
}Si esos enlaces forman una región de navegación, la estructura correcta probablemente es:
function Navigation() {
return (
<nav aria-label="Navegación principal">
<a href="/">Inicio</a>
<a href="/portfolio">Portafolio</a>
</nav>
);
}Un wrapper no es “malo” por existir. Puede aportar:
La decisión correcta depende de si el grupo representa una entidad real en el documento.
Componer significa construir componentes mayores utilizando componentes menores, elementos host y contenido recibido mediante props.
function ProductPage({ product }: { product: Product }) {
return (
<PageLayout>
<ProductGallery images={product.images} />
<ProductInformation product={product} />
<AddToCartForm productId={product.id} />
</PageLayout>
);
}Cada componente conserva una responsabilidad. El padre decide la estructura general y los hijos implementan partes específicas.
ProductPage
├── PageLayout
│ ├── ProductGallery
│ ├── ProductInformation
│ └── AddToCartFormReact favorece este modelo frente a construir jerarquías de herencia para reutilizar interfaz.
Este componente no aporta necesariamente una frontera útil:
function ProductName({ children }: { children: React.ReactNode }) {
return <span>{children}</span>;
}Puede tener sentido si forma parte de un design system, añade estilos consistentes, semántica o comportamiento. Sin eso, solo introduce navegación adicional entre archivos.
Extrae un componente cuando exista una responsabilidad, una interacción, una API o una razón real de reutilización.
type OrderSummaryProps = {
order: Order;
};
function OrderSummary({ order }: OrderSummaryProps) {
return (
<section aria-labelledby={`order-${order.id}-title`}>
<header>
<h2 id={`order-${order.id}-title`}>Pedido #{order.number}</h2>
<OrderStatus status={order.status} />
</header>
<dl>
{order.items.map((item) => (
<Fragment key={item.id}>
<dt>{item.name} × {item.quantity}</dt>
<dd>{formatCurrency(item.subtotal)}</dd>
</Fragment>
))}
</dl>
<OrderTotal value={order.total} />
</section>
);
}OrderSummary recibe el pedido completo.section crea una región semántica para un pedido.OrderStatus encapsula la representación del estado.dl.Fragment los agrupa sin insertar HTML inválido.key estable identifica cada pareja durante reconciliación.OrderTotal mantiene separada la responsabilidad de formato y presentación del total.Un fragment vacío es válido, pero normalmente deberías preguntarte si el componente puede devolver null o representar un estado vacío útil.
Los fragments dentro de arrays necesitan una key estable igual que cualquier otro grupo. Sin ella, React no puede relacionar correctamente cada grupo entre renders.
Un fragment estable no ofrece, en el canal estable general, un nodo DOM tradicional al que aplicar clases, estilos o APIs como focus(). Si necesitas una superficie real para layout, medición o semántica, utiliza un elemento apropiado.
Antes de eliminarlo, comprueba si era hijo directo de Grid o Flexbox, si definía un stacking context, si controlaba overflow o si aportaba semántica accesible.
También puedes devolver un array de elementos, pero cada entrada necesita key y suele ser menos legible que un fragment:
return [
<h2 key="title">Producto</h2>,
<p key="description">Descripción</p>,
];Úsalo solo cuando el array sea realmente la representación natural.
Un componente es la función; <Component /> crea un elemento que le indica a React que debe ejecutarla.
No puedes llamar APIs del navegador sobre un elemento de React. Necesitas esperar al commit y utilizar una ref cuando sea necesario.
Puede romper tablas, listas, semántica, selectors o layouts basados en hijos directos.
También puede destruir landmarks, agrupaciones semánticas o superficies necesarias para CSS y accesibilidad.
<>...</> no acepta key ni otras props. Usa Fragment explícito cuando necesites key.
En React normalmente es más claro pasar datos, children, slots o componentes y construir el resultado por composición.
Más componentes no significan automáticamente mejor arquitectura. Cada frontera añade una API y un lugar adicional que comprender.
key.null o un estado vacío.Fragment permite usar key.div es mejor que un fragment?dt y dd dentro de un map necesita un Fragment con key?Renderizado condicional explica cómo un componente produce árboles diferentes según el estado actual y qué ocurre con la identidad de las ramas que aparecen o desaparecen.