Fragments in React: When to Use <>...</>

React fragments group several elements into one return value without adding a wrapper node to the page. They are written with the empty JSX tag, and they let a component return more than one element while keeping the DOM clean. The empty tag is shorthand, and it is the version you will write most often.

Here is a component that returns a heading and a paragraph as siblings:

App.jsx

function Post() {
  return (
    <>
      <h1>My blog</h1>
      <p>Hello again.</p>
    </>
  );
}

The page shows the heading and the paragraph with no extra element between them. If you inspect the browser DOM, there is no div or other wrapper, so the two nodes sit directly inside their parent.

Why not just use a div

A div works, but it adds a real DOM node. That extra node can break flex and grid layouts, because a container that expects its children to line up now finds a wrapper in the way.

Imagine a card grid where every card must be a direct child of the grid container. Wrapping each card in a div forces you to restyle the grid to account for the extra layer.

Fragments exist for cases where the wrapper serves no purpose other than making JSX valid. Use a div only when it has a real job, such as applying a background, a border, or a spacing class.

Group text and elements together

Fragments also group plain text with elements. A date range field can keep the words "From" and "to" beside two inputs without introducing a wrapper.

App.jsx

function Range() {
  return (
    <>
      From <input aria-label="Start date" />{" "}
      to <input aria-label="End date" />
    </>
  );
}

The text and inputs render as inline siblings, so the sentence reads naturally: "From," a date field, "to," and a second date field, with no wrapper between them. The {" "} keeps a real space between the two inputs, because JSX drops a line break that sits directly next to a tag instead of turning it into a space. A wrapper element here would have forced the pieces onto separate lines or required extra styling to undo the wrapper.

When you need the Fragment import

The empty tag cannot take a key. When a list item must render several elements, you need the full Fragment import so the key has somewhere to go.

App.jsx

import { Fragment } from "react";
function Blog({ posts }) {
  return posts.map((post) => (
    <Fragment key={post.id}>
      <h2>{post.title}</h2>
      <p>{post.body}</p>
    </Fragment>
  ));
}

Each post renders a heading and a paragraph with no wrapper between them. The key stays on the Fragment, exactly where the list expects it, and the two child nodes appear as siblings in the list. The short tag and the import produce the same DOM, so the only reason to import is the key.

What to learn next

The single parent rule is what makes fragments necessary in the first place. The guide on why components return one parent element explains the rule, and the guide on rendering lists with map shows where keyed fragments fit into a list. Fragments pair with almost every JSX topic, so the single parent rule is worth understanding before you write much more markup.