En komponent må returnere ett enkelt root-element, men du vil ofte ikke legge til en ekstra wrapper <div> bare for å oppfylle den regelen (det kan ødelegge CSS-oppsett som fl/grid eller HTML-strukturer som tabeller). Et Fragment grupperer barn uten å legge til noen DOM-node.
() {
(
);
}
Hvis du brukte en <div> her i stedet, ville du få ugyldig HTML (<tr><div><td>…), og tabellen ville ødelegges. Fragment-en gir bare de to <td>-ene.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Bruk full form når du gjengi en liste med fragments, siden short <> ikke kan ta en key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragments holder DOM-en ren (ingen "wrapper div soup"), unngår å ødelegge semantiske/layout-sensitive strukturer, og reduserer node-antallet litt – alt med null runtime-kostnad.