Komponent musi zwrócić jeden element główny, ale często nie chcesz dodawać dodatkowej obudowy <div> tylko po to, aby spełnić tę regułę (może to zepsuć układy CSS, takie jak fl/grid, lub struktury HTML, takie jak tabele). Fragment grupuje elementy potomne bez dodawania węzła DOM.
() {
(
);
}
Gdybyś użył <div> tutaj zamiast tego, otrzymałbyś niepoprawny HTML (<tr><div><td>…), a tabela by się zepsuła. Fragment renderuje tylko dwa <td>.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Używaj pełnej formy przy renderowaniu listy fragmentów, ponieważ krótka forma <> nie może przyjąć key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragmenty utrzymują DOM czysty (bez "wrapper div soup"), zapobiegają zepsuciu struktur semantycznych/wrażliwych na układ i nieznacznie zmniejszają liczbę węzłów – wszystko z zerowym kosztem runtime.