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

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Aston

Стек: React

> Пример ответа

Основное различие между React.Fragment и пустыми скобками (<>...</>) в том, что пустые скобки - это синтаксический сахар (сокращенная запись) для React.Fragment. Функционально они идентичны: оба позволяют группировать дочерние элементы без добавления лишнего узла в DOM.

Однако есть два важных нюанса:

Поддержка ключей (keys): React.Fragment поддерживает атрибут key, что необходимо при рендеринге списков (например, в map). Пустые скобки не могут принимать атрибуты, поэтому для списков с ключами нужно использовать полную запись: <React.Fragment key={item.id}>.
Синтаксис: Пустые скобки короче и удобнее для простой группировки, но в некоторых инструментах (например, старые версии Babel или линтеры) могут требовать явного импорта Fragment.

Пример:

JSX
// Пустые скобки (короткая запись)
<>
  <div>Первый</div>
  <div>Второй</div>
</>

// Полный Fragment (с ключом)
{items.map(item => (
  <React.Fragment key={item.id}>
    <div>{item.name}</div>
    <div>{item.value}</div>
  </React.Fragment>
))}