O componentă trebuie să returneze un singur element rădăcină, dar adesea nu dorești să adaugi o wrapper <div> suplimentară doar pentru a satisface acea regulă (poate dăuna layout-urilor CSS ca fl/grid sau structurilor HTML ca tabelele). Un Fragment grupează copiii fără a adăuga niciun nod DOM.
() {
(
);
}
Dacă ai fi folosit un <div> aici în schimb, ai fi obținut HTML invalid (<tr><div><td>…), iar tabelul s-ar fi rupt. Fragment-ul renderizează doar cele două <td>.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Folosește forma completă când redă o listă de fragmente, deoarece forma scurtă <> nu poate lua o key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragment-urile mențin DOM-ul curat (fără "wrapper div soup"), evită ruperea structurilor semantice/sensibile la layout și reduc ușor numărul de noduri – totul cu cost de runtime zero.