Зачем нужны React Fragments

Основная идея

React Fragment позволяет группировать несколько элементов без добавления лишнего DOM-узла. Это решает проблему обязательного единственного корневого элемента в JSX и сохраняет чистую структуру HTML.

Ключевые аспекты

Группировка без обёртки — Fragment не создаёт элемент в DOM
Два синтаксиса — <Fragment> и сокращённый <></>
Атрибут key — можно добавить только к полной форме <Fragment key={id}>
Семантичность — не нарушает структуру HTML (особенно важно для таблиц, списков)

Когда использовать

Возврат нескольких элементов из компонента
Условный рендеринг группы элементов
Итерация с возвратом нескольких элементов на каждой итерации
Сохранение правильной HTML-структуры (table, dl, flexbox)

Плюсы

Нет лишних DOM-узлов
Лучшая производительность (меньше элементов)
Корректная семантика HTML
Не ломает CSS-стили (flexbox, grid)

Частые ошибки на собеседованиях

Не знают про короткий синтаксис <></>
Пытаются добавить key к короткому синтаксису — это невозможно
Используют div вместо Fragment там, где это ломает стили или семантику
Не понимают зачем Fragment нужен — «можно же div обернуть»
Забывают импортировать Fragment при использовании с key

Введение и проблематика

В JSX компонент обязан возвращать один корневой элемент. Когда нужно вернуть несколько элементов, разработчики часто оборачивают их в <div>. Но это создаёт лишний DOM-узел, который может сломать стили или нарушить семантику HTML.

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

❓

Code Example 1: Почему первый вариант выдаёт ошибку? Как Fragment решает эту проблему?

tsx

// ❌ Без Fragment — ошибка
function Columns() {
  return (
    <td>Column 1</td>
    <td>Column 2</td>
  )
  // Error: Adjacent JSX elements must be wrapped
}
 
// ✅ С Fragment — работает
function Columns() {
  return (
    <>
      <td>Column 1</td>
      <td>Column 2</td>
    </>
  )
}

Базовая теория

Что такое Fragment

Fragment — это специальный компонент React, который не отображается в DOM. Он существует только на уровне React для группировки дочерних элементов.

Два синтаксиса

❓

Code Example 2: В чём разница между коротким и полным синтаксисом Fragment? Когда нужен полный синтаксис?

tsx

// Короткий синтаксис — пустые теги
function Example() {
  return (
    <>
      <Header />
      <Main />
      <Footer />
    </>
  )
}
 
// Не требует импорта!
// Нельзя добавить атрибуты

Практические примеры

Проблема с таблицами

❓

Code Example 3: Почему div внутри tr — это проблема? Как Fragment помогает?

tsx

// ❌ С div — невалидный HTML
function TableRow() {
  return (
    <div>  {/* div внутри tr — ошибка! */}
      <td>Cell 1</td>
      <td>Cell 2</td>
    </div>
  )
}
 
// ✅ С Fragment — валидный HTML
function TableRow() {
  return (
    <>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </>
  )
}
 
// Использование
function Table() {
  return (
    <table>
      <tr>
        <TableRow />  {/* Корректно: td внутри tr */}
      </tr>
    </table>
  )
}

Проблема с Flexbox

❓

Code Example 4: Как лишний div влияет на flexbox layout? Почему Fragment лучше?

tsx

// ❌ С div — ломает flexbox
function FlexItem() {
  return (
    <div>  {/* Лишний flex-item! */}
      <span>Item 1</span>
      <span>Item 2</span>
    </div>
  )
}
 
// ✅ С Fragment — работает корректно
function FlexItem() {
  return (
    <>
      <span>Item 1</span>
      <span>Item 2</span>
    </>
  )
}
 
// Родитель с flexbox
function Container() {
  return (
    <div style={{ display: 'flex' }}>
      <FlexItem />  {/* span-ы становятся flex-items напрямую */}
    </div>
  )
}

Условный рендеринг группы

❓

Code Example 5: Как отрендерить группу элементов условно без добавления лишнего div?

tsx

function UserInfo({ user, isAdmin }) {
  return (
    <div>
      <h1>{user.name}</h1>
 
      {isAdmin && (
        <>
          <AdminBadge />
          <AdminControls />
          <AuditLog />
        </>
      )}
 
      <UserStats user={user} />
    </div>
  )
}

Итерация с несколькими элементами

При итерации с Fragment нужен key — используйте полный синтаксис.

❓

Code Example 6: Почему при итерации с Fragment нужен полный синтаксис? Что будет, если использовать короткий?

tsx

import { Fragment } from 'react'
 
function DefinitionList({ items }) {
  return (
    <dl>
      {items.map(item => (
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.definition}</dd>
        </Fragment>
      ))}
    </dl>
  )
}
 
// ❌ Короткий синтаксис с key — ошибка!
{items.map(item => (
  <> key={item.id}  {/* Так не работает! */}
    <dt>{item.term}</dt>
    <dd>{item.definition}</dd>
  </>
))}

Сравнение: Fragment vs div

Аспект	Fragment	div
DOM-узел	Нет	Да
Производительность	Лучше	Хуже (больше узлов)
Семантика HTML	Сохраняется	Может нарушиться
CSS (flex/grid)	Не влияет	Добавляет уровень
Атрибуты	Только key	Любые
Стилизация	Невозможна	Возможна

Когда НЕ использовать Fragment

⚠️

Fragment нельзя стилизовать — у него нет DOM-представления.

tsx

// ❌ Нельзя добавить стили к Fragment
<Fragment style={{ color: 'red' }}>  {/* Ошибка! */}
  <span>Text</span>
</Fragment>
 
// ✅ Если нужны стили — используйте div
<div style={{ color: 'red' }}>
  <span>Text</span>
</div>

Используйте <div> когда:

Нужна обёртка для стилей
Нужен обработчик событий на группе
Нужен ref на контейнер
Семантически имеет смысл (секция, группа)

Пограничные кейсы

Fragment как обёртка для условия

tsx

// ✅ Можно вернуть Fragment из условия
function Content({ type }) {
  if (type === 'full') {
    return (
      <>
        <Header />
        <Sidebar />
        <Main />
      </>
    )
  }
 
  return <Main />  // Можно вернуть один элемент
}

Вложенные Fragments

tsx

// ✅ Можно вкладывать
function Layout() {
  return (
    <>
      <Header />
      <>
        <Sidebar />
        <Main />
      </>
      <Footer />
    </>
  )
}
// Эквивалентно одному уровню — все элементы станут соседями

Fragment с единственным дочерним элементом

tsx

// Бессмысленно, но не ошибка
function Useless() {
  return (
    <>
      <OnlyChild />
    </>
  )
}
 
// Эквивалентно:
function Better() {
  return <OnlyChild />
}

Вопросы интервьюера

Q: Зачем нужен Fragment, если можно использовать div?

div создаёт лишний DOM-узел, который может сломать CSS (flex, grid), нарушить семантику HTML (td внутри tr), увеличить размер DOM. Fragment решает эти проблемы.

Q: Можно ли добавить className к Fragment?

Нет. Fragment не создаёт DOM-элемент, поэтому у него не может быть атрибутов кроме key. Для стилей используйте div или span.

Q: Когда нужен полный синтаксис Fragment?

Когда нужно добавить key — при итерации по массиву с возвратом нескольких элементов. Короткий синтаксис <></> не поддерживает атрибуты.

Q: Fragment влияет на производительность?

Положительно — меньше DOM-узлов означает меньше памяти и быстрее обновления. Но разница заметна только при большом количестве элементов.

Источники

Code Example 1: Fragment solves JSX limitation

❓ Почему первый вариант выдаёт ошибку? Как Fragment решает эту проблему?

tsx

function Columns() {
  return (
    <td>Column 1</td>
    <td>Column 2</td>
  )
}
 
function Columns() {
  return (
    <>
      <td>Column 1</td>
      <td>Column 2</td>
    </>
  )
}

Code Example 2: Short vs full Fragment syntax

❓ В чём разница между коротким и полным синтаксисом Fragment? Когда нужен полный синтаксис?

Short syntax:

tsx

function Example() {
  return (
    <>
      <Header />
      <Main />
      <Footer />
    </>
  )
}

Full syntax:

tsx

import { Fragment } from 'react'
 
function Example() {
  return (
    <Fragment>
      <Header />
      <Main />
      <Footer />
    </Fragment>
  )
}
 
function List({ items }) {
  return items.map(item => (
    <Fragment key={item.id}>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </Fragment>
  ))
}

Code Example 3: Tables - div breaks HTML

❓ Почему div внутри tr — это проблема? Как Fragment помогает?

tsx

function TableRow() {
  return (
    <div>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </div>
  )
}
 
function TableRow() {
  return (
    <>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </>
  )
}
 
function Table() {
  return (
    <table>
      <tr>
        <TableRow />
      </tr>
    </table>
  )
}

Code Example 4: Flexbox - div adds extra flex item

❓ Как лишний div влияет на flexbox layout? Почему Fragment лучше?

tsx

function FlexItem() {
  return (
    <div>
      <span>Item 1</span>
      <span>Item 2</span>
    </div>
  )
}
 
function FlexItem() {
  return (
    <>
      <span>Item 1</span>
      <span>Item 2</span>
    </>
  )
}
 
function Container() {
  return (
    <div style={{ display: 'flex' }}>
      <FlexItem />
    </div>
  )
}

Code Example 5: Conditional rendering of group

❓ Как отрендерить группу элементов условно без добавления лишнего div?

tsx

function UserInfo({ user, isAdmin }) {
  return (
    <div>
      <h1>{user.name}</h1>
 
      {isAdmin && (
        <>
          <AdminBadge />
          <AdminControls />
          <AuditLog />
        </>
      )}
 
      <UserStats user={user} />
    </div>
  )
}

Code Example 6: Iteration with multiple elements

❓ Почему при итерации с Fragment нужен полный синтаксис? Что будет, если использовать короткий?

tsx

import { Fragment } from 'react'
 
function DefinitionList({ items }) {
  return (
    <dl>
      {items.map(item => (
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.definition}</dd>
        </Fragment>
      ))}
    </dl>
  )
}
 
{items.map(item => (
  <> key={item.id}
    <dt>{item.term}</dt>
    <dd>{item.definition}</dd>
  </>
))}

React Front-end Инженер