Um componente deve retornar um único elemento raiz, mas muitas vezes você não quer adicionar um wrapper <div> extra apenas para satisfazer essa regra (pode quebrar layouts CSS como fl/grid ou estruturas HTML como tabelas). Um Fragment agrupa filhos sem adicionar nenhum nó DOM.
() {
(
);
}
Se você usasse um <div> aqui, em vez disso, obteria HTML inválido (<tr><div><td>…), e a tabela quebraria. O Fragment renderiza apenas os dois <td>.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Use a forma completa ao renderizar uma lista de fragments, já que a forma curta <> não pode aceitar uma key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragments mantêm o DOM limpo (sem "wrapper div soup"), evitam quebrar estruturas semânticas/sensíveis ao layout e reduzem ligeiramente a contagem de nós – tudo com custo de tempo de execução zero.