Что такое React Fragment? Зачем он нужен?

Что такое React Fragment?

React Fragment — это легковесный способ группировки дочерних элементов в JSX без добавления лишнего узла в DOM. В обычном JSX вы не можете вернуть несколько элементов без обёртки, поэтому часто используют <div>. Однако это может привести к избыточной вложенности, проблемам с CSS (например, Flexbox или Grid) и лишним узлам, которые замедляют рендеринг.

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

Fragment решает эти проблемы: он не создаёт реального HTML-элемента, а только группирует детей для React. Это особенно полезно в таблицах, списках или при использовании CSS-сеток, где лишний <div> может сломать вёрстку.

Пример использования

import React, { Fragment } from 'react';

function Table() {
  return (
    <table>
      <tr>
        <Fragment>
          <td>Ячейка 1</td>
          <td>Ячейка 2</td>
        </Fragment>
      </tr>
    </table>
  );
}

Также можно использовать сокращённый синтаксис <>...</>, который не требует импорта.

Вывод

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