Komponenta mora vrniti en sam koreni element, vendar pogosto ne želiš dodati dodatnega wrapper <div> le zato, da bi izpolnil to pravilo (lahko poruši CSS izglede, kot sta fl/grid, ali HTML strukture, kot so tabele). Fragment združi otroke brez dodajanja katerega koli DOM vozlišča.
() {
(
);
}
Če bi namesto tega uporabil <div>, bi dobil neveljavno HTML (<tr><div><td>…), in tabela bi se zlomila. Fragment prikaže samo dva <td>.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Uporabi polno obliko pri prikazovanju seznama fragmentov, saj kratka oblika <> ne more imeti key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragmenti ohranijo DOM čistega (brez "juhe iz wrapper div-ov"), preprečijo porušitev semantičnih/občutljivih na postavitev struktur in nekoliko zmanjšajo število vozlišč – vse s ničelnimi stroški pri izvajanju.