Fragmentos: agrupar sem um div extra

O problema do elemento raiz

Lembre-se de uma regra do JSX: um componente deve retornar um único elemento raiz. Se você tentar retornar dois elementos irmãos, dá erro:

// ❌ Erro: dois elementos raiz
function Dados() {
  return (
    <h1>Título</h1>
    <p>Descrição</p>
  );
}

A solução clássica é envolvê-los em um <div>. Mas às vezes esse <div> extra atrapalha: polui o HTML, pode quebrar layouts com CSS (flex, grid, tabelas) ou adicionar nós desnecessários à árvore.

A solução: fragmentos

Um fragmento agrupa vários elementos sem criar um nó extra no DOM. Ele é escrito com a sintaxe curta <>...</>:

function Dados() {
  return (
    <>
      <h1>Título</h1>
      <p>Descrição</p>
    </>
  );
}

Isso renderiza o <h1> e o <p> como irmãos diretos, sem nenhum <div> que os envolva. No navegador você não verá nenhum contêiner adicional.

Fragmentos com key em listas

A forma curta <>...</> não aceita props. Quando você precisa de um fragmento com key (por exemplo, dentro de um .map() que retorna vários elementos por linha), use a forma longa <React.Fragment>:

{items.map((item) => (
  <React.Fragment key={item.id}>
    <dt>{item.termo}</dt>
    <dd>{item.definicao}</dd>
  </React.Fragment>
))}

Regra prática: use <>...</> por padrão; mude para <React.Fragment key={...}> apenas quando precisar passar uma key para ele.