React 19+ · Component

Fragment

Fragment groups multiple JSX elements without adding a wrapper node to the DOM. Use <>...</> for simple groups, or explicit <Fragment> when a key or ref is needed.

How it works

Fragment groups several JSX children as one renderable unit without inserting an extra DOM element. Use the shorthand for ordinary groups; use the named component when a key or ref is required. A Fragment ref exposes a FragmentInstance for first-level DOM-child interaction.

Syntax

<Fragment>{children}</Fragment>
<>{children}</>

Parameters

Name	Type	Description
`ref`	`optional ref`	A ref object or callback; React assigns a FragmentInstance for interacting with the Fragment's wrapped DOM nodes.

Returns

A JSX Fragment grouping its children without adding a wrapper node to the DOM.

Key points

Use Fragment when several sibling elements must occupy a position that accepts one JSX element.
Fragment grouping preserves the DOM tree, avoiding an extra wrapper that could affect selectors, layout, or semantics.
Prefer <>...</> for simple grouping when no Fragment props are needed.
A ref on a Fragment gives access to a FragmentInstance rather than a single underlying element.

Common mistakes

The shorthand cannot receive a key, so use the explicit Fragment component when rendering keyed groups.
Fragment refs require the named component; the shorthand syntax cannot be used for this ref.

Example: Keyed groups without wrapper nodes

import { Fragment } from 'react';

export default function ContactList({ contacts }) {
  return (
    <ul>
      {contacts.map(contact => (
        <Fragment key={contact.id}>
          <li>{contact.name}</li>
          <li>{contact.email}</li>
        </Fragment>
      ))}
    </ul>
  );
}

Use the explicit Fragment form when each mapped item must contribute multiple sibling elements and needs a key.

When to use it

Return multiple elements

A component needs to return multiple sibling elements where one JSX element is expected.

Keyed list groups

A mapped item must render multiple sibling nodes while retaining a stable key.

Ref-based child interaction

DOM interaction is needed across a Fragment's first-level children without adding a wrapper.

Interview questions

QWhat problem does Fragment solve?

A Fragment groups multiple elements where React expects one element, but it does not add a wrapper node to the resulting DOM. The shorthand <>...</> is the usual equivalent of <Fragment>...</Fragment>.

Follow-up: When is the explicit form necessary? Use <Fragment> when a group needs a key or a ref, because the shorthand cannot express those props.

QHow do you render keyed multiple-element list items?

A key identifies each grouped item when mapping multiple elements, so use the explicit Fragment component with key={...}. The shorthand cannot receive a key.

Follow-up: Why not add a div instead? A div changes the DOM structure, while Fragment grouping leaves the resulting DOM unchanged.

QWhat does a Fragment ref provide?

A Fragment can accept a ref and React supplies a FragmentInstance. That object provides methods for interacting with the Fragment's first-level DOM children.

Follow-up: What syntax is required? Import Fragment from react and render <Fragment ref={yourRef}>...</Fragment>; <>...</> cannot receive the ref.

FragmentInstance
useRef
key

Source: <Fragment> (<>...</>) – React. Checked 2026-10-15.