Learn the concept

JSX

react

mid

fragments

What are React Fragments and when should you use them?

fragments

jsx

dom

layout

lists

Quick Answer

React Fragments let you group multiple elements without adding an extra DOM node. Use the <Fragment> syntax when you need to pass a key prop, or the shorter <>...</> syntax when you don't.

Detailed Explanation

React requires every component to return a single root element. Before Fragments, developers wrapped sibling elements in a <div>, which added unnecessary nodes to the DOM. Fragments solve this by grouping children without producing any DOM output.

The Problem Fragments Solve

Without Fragments, returning multiple elements requires a wrapper:

JSX

// This adds an unnecessary <div> to the DOM
function Columns() {
  return (
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  );
}

This <div> inside a <tr> creates invalid HTML and breaks table layout. Fragments eliminate the wrapper:

JSX

function Columns() {
  return (
    <>
      <td>Hello</td>
      <td>World</td>
    </>
  );
}

Two Syntaxes

Short syntax <>...</> — concise, no attributes allowed:

JSX

<><h1>Title</h1><p>Content</p></>

Explicit <Fragment> syntax — required when passing a key prop:

JSX

import { Fragment } from 'react';
items.map((item) => (
  <Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.description}</dd>
  </Fragment>
));

When to Use Fragments

Table rows — Return multiple <td> elements from a component without breaking <table> structure
Definition lists — Return <dt> + <dd> pairs
CSS Flexbox/Grid — Avoid wrapper <div> that becomes an unwanted flex/grid child and breaks layout
Lists with key — Use <Fragment key={id}> when mapping over arrays and returning multiple elements per item
Conditional rendering — Group elements without adding a DOM node that affects styling

When NOT to Use Fragments

When you need to attach styles, classes, or event handlers — Fragments don't render to the DOM, so they can't have attributes (except key)
When the wrapper <div> is semantically meaningful or needed for layout — use the appropriate HTML element instead

Fragments vs Arrays

You can also return arrays from components: return [<li key="1">A</li>, <li key="2">B</li>]. However, Fragments are preferred because:

No manual key prop required (unless using <Fragment key>)
No commas between elements
Cleaner, more readable JSX

Code Examples

Fragment Syntax VariantsJSX

import { Fragment } from 'react';

// Short syntax — most common
function Header() {
  return (
    <>
      <h1>Welcome</h1>
      <p>Description text</p>
    </>
  );
}

// Explicit Fragment with key — required for lists
function Glossary({ items }) {
  return (
    <dl>
      {items.map((item) => (
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.definition}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

// Table example — div wrapper would break HTML
function TableRow({ data }) {
  return (
    <>
      <td>{data.name}</td>
      <td>{data.value}</td>
      <td>{data.status}</td>
    </>
  );
}

Real-World Applications

Use Cases

Data Tables

Components that return table cells (<td>) must use Fragments to avoid breaking the table structure with invalid wrapper elements.

Design System Components

Headless UI components return Fragments to avoid adding DOM nodes that interfere with consumer styling and layout.

Mini Projects

Accessible Form Builder

beginner

Build form field components that return label + input + error message using Fragments, ensuring no extra wrappers break the form layout.

Industry Examples

Radix UI

Radix primitives use Fragments and the asChild prop pattern to avoid adding wrapper DOM nodes, letting consumers control the rendered element.

Resources

React Docs - Fragment

docs

Related Questions

Why are keys important when rendering lists in React?

junior