Un component deve restituire un singolo elemento root, ma spesso non vuoi semplicemente aggiungere un wrapper <div> aggiuntivo solo per soddisfare questa regola (può rompere layout CSS come fl/grid o strutture HTML come le tabelle). Un Fragment raggruppa i figli senza aggiungere alcun nodo DOM.
() {
(
);
}
Se usassi <div> qui invece, otterresti HTML non valido (<tr><div><td>…), e la tabella si romperebbe. Fragment renderizza solo i due <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 quando renderizzi un'elenco di fragment, poiché la forma breve <> non può accettare key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
I Fragment mantengono il DOM pulito (niente "wrapper div soup"), evitano di rompere strutture sensibili a layout/semantica, e riducono leggermente il numero di nodi — il tutto a costo di runtime zero.