What are React Fragments used for?

TL;DR

React Fragments are used to group multiple elements without adding extra nodes to the DOM. This is useful when you want to return multiple elements from a component's render method without wrapping them in an additional HTML element. You can use the shorthand syntax <>...</> or the React.Fragment syntax.

return (
  <>
    <ChildComponent1 />
    <ChildComponent2 />
  </>
);

What are React Fragments used for?

Grouping multiple elements

React Fragments allow you to group multiple elements without adding extra nodes to the DOM. This is particularly useful when you want to return multiple elements from a component's render method but don't want to introduce unnecessary wrapper elements.

Avoiding unnecessary DOM nodes

Using React Fragments helps avoid unnecessary wrapper elements in the DOM.

Common misconception: Fragments are often described as a performance optimization, on the assumption that one extra <div> per component is a meaningful cost. In practice, the cost is negligible. Browsers can render thousands of additional DOM nodes without measurable impact. The actual reasons to reach for a fragment are structural, not performance-related.

Valid HTML structure: Some elements have strict children rules. A <table> cannot contain a <div> between it and its <tr> rows; a <tr> cannot contain a <div> between it and its <td> cells; a <select> only accepts <option> and <optgroup> children. Fragments let a component return multiple <tr>, <td>, or <option> siblings without breaking the parent's HTML contract.
CSS layout integrity: When the parent uses Flexbox or CSS Grid, an extra wrapper <div> becomes a flex/grid item itself and disrupts the layout (the wrapper takes the grid slot, not its children). Fragments keep the children as direct descendants of the layout container.
HOC and composition: A higher-order component or render-prop helper that wraps children cannot wrap them in a <div> without breaking layout for every consumer. Returning the children inside a fragment lets the wrapper add behavior without adding DOM.
Cleaner markup: Avoiding pointless wrapper <div>s makes the rendered HTML easier to read and style.

Syntax

There are two ways to use React Fragments:

Shorthand syntax: This is the most concise way to use fragments. It uses empty tags <>...</>. The shorthand cannot accept any props, including key — if you need a key (or any other attribute), you must use the explicit React.Fragment form below.
```
return (
  <>
    <ChildComponent1 />
    <ChildComponent2 />
  </>
);
```
Full syntax: This uses React.Fragment and is required whenever you need to pass a key prop. key is the only prop React.Fragment accepts.
```
return (
  <React.Fragment>
    <ChildComponent1 />
    <ChildComponent2 />
  </React.Fragment>
);
```

When to use `<Fragment>` instead of `<>`

The shorthand <>...</> is concise but does not accept any props, including key. The single case that requires the explicit React.Fragment form is when a key is needed, which happens whenever a map produces items that each render more than one sibling element.

The shorthand version below is incorrect because React cannot attach a key to a <>...</> fragment. React will emit a warning about a missing key:

// Bug: <></> cannot accept a key, so React has no way to identify these fragments
{items.map((item) => (
  <>
    <dt>{item.term}</dt>
    <dd>{item.definition}</dd>
  </>
))}

The fix is to use the full Fragment form so you can pass a key:

import { Fragment } from 'react';

{items.map((item) => (
  <Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.definition}</dd>
  </Fragment>
))}

key is the only prop Fragment accepts. There is no className, style, or event handler. If any of those are needed, use a real wrapper element instead.

Use cases

Returning multiple elements from a component: When a component needs to return multiple sibling elements, using a fragment can help avoid unnecessary wrapper elements.
Rendering lists: When rendering a list of elements, fragments can be used to group the list items without adding extra nodes to the DOM.
Conditional rendering: When conditionally rendering multiple elements, fragments can help keep the DOM structure clean.

What are React Fragments used for?

TL;DR