Компонент должен возвращать единственный корневой элемент, но часто вы не хотите добавлять дополнительный wrapper <div> только для соблюдения этого правила (он может нарушить CSS-макеты, такие как fl/grid, или HTML-структуры, такие как таблицы). Fragment группирует дочерние элементы без добавления какого-либо узла DOM.
() {
(
);
}
Если бы вы использовали здесь <div>, вы получили бы некорректный HTML (<tr><div><td>…), и таблица сломалась бы. Fragment отображает только две <td>.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Используйте полную форму при отображении списка фрагментов, так как короткая форма <> не может принять key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Frагменты сохраняют DOM чистым (без "супа из div-оборачиваний"), избегают нарушения семантических/чувствительных к макету структур и немного сокращают количество узлов – всё с нулевой стоимостью для времени выполнения.