В чем разница между React.Fragment и пустыми скобками в React

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

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

Как отвечать

Начните с сути: обе записи создают один и тот же фрагмент, то есть группу дочерних элементов без лишнего узла в DOM. С новым JSX-трансформом (React 17 и новее) <> компилируется в вызов jsx(Fragment, ...) из react/jsx-runtime, поэтому по результату и скорости разницы нет.

Дальше различия:

• пропсы: короткая запись не принимает никаких атрибутов. Полная <Fragment> в стабильном React принимает только key, никаких className или обработчиков;
• ключи в списках: если в map на каждый элемент нужно вернуть несколько соседних узлов, пишут <Fragment key={item.id}>. С <> ключ поставить некуда, и React выдаст предупреждение про key;
• импорт: React.Fragment и import { Fragment } from 'react' одно и то же. Со старым трансформом <> требовал React в области видимости, сейчас нет.

Классический пример полной формы: список определений, где на элемент приходится пара <dt> и <dd>, а обёртка в div сломала бы разметку <dl>.

Добавьте про вёрстку: раз фрагмента нет в DOM, его дети становятся прямыми потомками родителя. Это важно для flex- и grid-контейнеров и для таблиц, где лишний div внутри <tr> даёт невалидный HTML.

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

Говорят, что <> «легче» или быстрее. После компиляции это одинаковый код, и выбор остаётся чисто стилистическим, пока не нужен ключ.

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

Возвращают из map конструкцию <> с несколькими детьми, получают предупреждение про ключи и ставят key на внутренние элементы. Ключ должен быть у того, что возвращается из итерации, то есть у самого фрагмента.