Что такое React.Fragment?

React.Fragment — обёртка, позволяющая вернуть из компонента несколько элементов без добавления лишнего узла в DOM.

Проблема

JSX-выражение должно иметь один корневой элемент. Оборачивание в <div> решает синтаксис, но засоряет DOM:

• ломает CSS-структуры (display: flex/grid у родителя, селекторы >);
• невалидная разметка там, где обёртки запрещены: <tr> внутри <table>, <li> внутри <ul>;
• лишняя вложенность в DevTools и семантический шум.

Решение

const TableRow = () => (
  <>
    <td>Имя</td>
    <td>Email</td>
  </>
);
// в DOM попадут только <td> — без обёртки

<>...</> — сокращённый синтаксис <React.Fragment>. В дереве React фрагмент есть, в DOM — нет.

Полная форма и key

Единственный проп фрагмента — key, и он требует полной записи:

{sections.map((s) => (
  <React.Fragment key={s.id}>
    <dt>{s.term}</dt>
    <dd>{s.definition}</dd>
  </React.Fragment>
))}

Короткий синтаксис <> атрибуты не принимает.

Нюансы

• Фрагменты можно вкладывать; на reconciliation они почти не влияют (это «прозрачный» узел).
• Типичные места: строки таблиц, пары dt/dd, группы элементов в списках, компоненты-«наборы» без собственной обёртки.

Коротко для собеседования

Fragment группирует несколько элементов без лишнего DOM-узла: <>...</> или <React.Fragment>. Нужен, когда обёртка-див ломает разметку (таблицы, списки) или CSS (flex/grid). Единственный проп — key, для него используется полная форма записи.