1. Es un poco más rápido y tiene menos uso de memoria (no es necesario crear un nodo DOM adicional). Esto solo tiene un beneficio real en árboles muy grandes y/o profundos, pero el rendimiento de la aplicación a menudo se ve afectado por miles de cortes. Este es un corte menos.
2. Algunos mecanismos de CSS, como Flexbox y CSS Grid, tienen una relación padre-hijo especial, y agregar div s en el medio dificulta mantener el diseño deseado mientras se extraen los componentes lógicos.
3. El inspector DOM está menos abarrotado. :-)

Puede encontrar las descripciones de algunos otros casos de uso en este problema de React: Agregar API de fragmentos para permitir la devolución de múltiples componentes del procesamiento

Además de todas las respuestas anteriores, hay una ventaja más: la legibilidad del código , el componente Fragment admite una forma de azúcar sintáctica, <> . Por lo tanto, el código en su pregunta se puede escribir más fácilmente como:

 render() { return ( <> Some text. <h2>A heading</h2> More text. <h2>Another heading</h2> Even more text. </> ); }

Según los documentos ,

En React, esto se convierte en un <React.Fragment/> , como en el ejemplo de la sección anterior. (Los marcos que no son React que usan JSX pueden compilarse en algo diferente).

Sin desorden, ¿verdad?

Tenga en cuenta que aún necesita usar la sintaxis <Fragment> si necesita proporcionar la key para el fragmento.

• Funciones añadidas que antes no eran posibles con JSX
• Mejor marcado jsx semántico. Los elementos de envoltura se utilizan cuando se necesitan, no porque estén obligados a hacerlo.
• Menos marcado dom general (mayor rendimiento de procesamiento y menos sobrecarga de memoria)

Es tan simple como cuando no necesita un elemento contenedor, no está obligado a usar uno. Tener menos elementos es excelente, pero creo que el mayor beneficio es poder representar elementos en jsx que antes no eran posibles y agregar un mejor significado semántico a los elementos de envoltura porque ahora son opcionales.

Esto no era posible antes:

 <select> {this.renderOptions()} </select>

Mirando lo siguiente en React 15, no puede saber si el elemento contenedor es necesario o no:

 <span> <h1>Hello</h1> {this.getContent()} </span>