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?

Fragments group sibling elements in React's returned tree without adding a host wrapper element to the DOM.

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.

• 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:

1. 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 />
     </>
   );

2. Full syntax: This uses React.Fragment and is required whenever you need to pass a key prop. In stable React 19.2, key is the only accepted prop; Canary builds also support an experimental ref prop.

   import { Fragment } from 'react';
   
   return (
     <Fragment>
       <ChildComponent1 />
       <ChildComponent2 />
     </Fragment>
   );

When to use <Fragment> instead of <>

The shorthand <>...</> is concise but does not accept props. In stable React, use the explicit React.Fragment form when a key is needed, which happens whenever a map produces items that each render more than one sibling element. Canary builds additionally require the explicit form for the experimental Fragment ref API.

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>
  ));
}

In stable React 19.2, 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. Experimental Fragment refs are available only in Canary builds and should be labeled as such.

Use cases

Fragments are useful whenever grouping is required for React structure but an extra host element would be unwanted:

• 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.

Further reading

• React Fragments - Official Documentation

Exercises