Një komponent duhet të kthejë një element bazë të vetëm, por shpesh nuk dëshiron të shtosh një mbulim shtesë <div> vetëm për të përmbushur atë rregull (mund të thyejë pajimet CSS si fl/grid ose strukturat HTML si tabelat). Një Fragment grupon fëmijët pa shtuar asnjë nod DOM.
() {
(
);
}
Nëse do të përdorje një <div> këtu në vend të kësaj, do të marrje HTML të pavlefshëm (<tr><div><td>…), dhe tabela do të thyhet. Fragment-i përshkruan vetëm dy <td>.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Përdore formën e plotë kur përcjellis një listë fragmentesh, pasi forma e shkurtër <> nuk mund të ketë një key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragment-et mbajnë DOM-in të pastër (nuk ka "supë wrapper div"), shmangen thyerjet e strukturave semantike/të ndjeshme ndaj planit dhe zvogëlojnë pak numrin e nödeve – gjithçka me zero kosto në kohën e ekzekutimit.