Зачем нужен React.Fragment

Что проверяют

Знаете ли вы, зачем React группировка без DOM-узла и где она обязательна, а не просто красивее. Следом обычно спрашивают про key у фрагмента и отличие короткой записи <>...</> от полной.

Как отвечать

Компонент возвращает одно значение, а два соседних JSX-элемента без обёртки не скомпилируются. Фрагмент группирует детей и не создаёт узла в DOM. Когда это нужно по делу:

• валидная разметка: компонент строки таблицы возвращает несколько <td>, а компонент списка несколько <li>. Лишний <div> внутри <tr> или <ul> делает HTML невалидным: React в dev-режиме предупредит о неверной вложенности, а при SSR браузер перестроит такую разметку, и гидратация разойдётся;
• вёрстка на flex и grid: обёртка становится лишним уровнем, дети перестают быть флекс-элементами родителя, раскладка ломается;
• селекторы и доступность: лишние div засоряют дерево для скринридеров и ломают CSS-селекторы вроде > и :first-child.

Две формы записи:

• <>...</>: короткий синтаксис, никаких атрибутов не принимает;
• <Fragment key={id}>: полная форма, импортируется из react. Нужна при map, когда на каждый элемент приходится несколько узлов, например пара <dt> и <dd>.

Можно упомянуть, что компонент может вернуть и массив, но тогда каждому элементу нужен key, поэтому фрагмент удобнее. Отдельно скажите, что фрагмент не меняет поведение контекста, порталов и событий: для React это просто группа детей.

Где спотыкаются

Говорят, что фрагмент заметно ускоряет приложение. Выигрыш от одного узла DOM ничтожен, главная причина в корректной разметке и стилях.

Пишут <> внутри map и получают предупреждение про ключи, потому что короткая запись key не принимает.

Пытаются повесить на фрагмент className или onClick. Узла в DOM нет, вешать стили и обработчик не на что, для этого нужен настоящий элемент.