Komponent għandu jirritorna element root wieħed, iżda ħafna drabi m'għandekx bżonn tżid wrapper <div> żejjed biss biex tissoddisfa r-regola (jista' jkesser CSS layouts bħal flex/grid jew strutturi HTML bħal tables). Fragment jaggruppja children mingħajr ma żżid l-ebda nodu DOM.
() {
(
);
}
Ikun użajt <div> hawn minflok, sibt HTML invalidu (<tr><div><td>…), u t-tabella tat-break. Il-Fragment ifakkar biss it-tnejn <td>s.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Uża l-forma sħiħa meta tirrender lista ta' fragments, billi l-qasira <> ma tistax tieħu key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragments iħallu l-DOM nadif (ebda "wrapper div soup"), jiġu evitati l-ħela ta' strutturi semantic/layout-sensitive, u qallilil inaqqsu l-għadd ta' nodes — kollha mingħajr ebda spiża runtime.