Komponenta mora vratiti jedan root element, ali često ne želiš dodati dodatni <div> wrapper samo da zadovoljis to pravilo (može slomiti CSS layouts kao fl/grid ili HTML strukture kao tablice). Fragment grupi djecu bez dodavanja DOM noda.
() {
(
);
}
Da si umjesto toga koristio <div>, dobio bi nevaljani HTML (<tr><div><td>…), a tablica bi se slomila. Fragment renderira samo dva <td>a.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Koristi punu formu kada renderiras listu fragmenata, jer kratka <> ne može primiti key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragmenti čuvaju DOM čist (bez "wrapper div juhe"), izbjegavaju lomljenje semantičkih/layout-osjetljivih struktura i malo smanjuju broj čvorova — sve s nultom cijenom izvršavanja.