Что такое Fragment в React

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

Он не рендерится в HTML, но позволяет возвращать несколько элементов из компонента.

Зачем нужен Fragment?

В React каждый компонент должен возвращать один корневой элемент. Раньше приходилось оборачивать JSX в <div>, что засоряло DOM:

// Плохой пример
return (
  <div>
    <h1>Заголовок</h1>
    <p>Описание</p>
  </div>
);

С фрагментом:

// Хороший пример
return (
  <Fragment>
    <h1>Заголовок</h1>
    <p>Описание</p>
  </Fragment>
);

*Или ещё короче:

// Короткий синтаксис
return (
  <>
    <h1>Заголовок</h1>
    <p>Описание</p>
  </>
);

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