Un componente debe devolver un único elemento raíz, pero a menudo no quieres agregar un <div> contenedor extra solo para cumplir esa regla (puede romper diseños CSS como flex o grid, o estructuras HTML como tablas). Un Fragment agrupa elementos hijos sin agregar ningún nodo al DOM.
() {
(
);
}
Si en su lugar usaras un <div> aquí, obtendrías HTML inválido (<tr><div><td>…), y la tabla se rompería. El Fragment renderiza solo los dos <td>.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Usa la forma completa al renderizar una lista de fragments, ya que la forma corta <> no puede recibir una key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Los Fragments mantienen el DOM limpio (sin una "sopa de divs contenedores"), evitan romper estructuras sensibles a la semántica o al diseño, y reducen ligeramente la cantidad de nodos, todo ello sin ningún costo en tiempo de ejecución.