React Fragments

Why Fragments Exist

Before fragments, developers wrapped siblings in unnecessary <div> elements, breaking table semantics, flex/grid layouts, and accessibility structures. Fragments solve this by grouping in the virtual tree only.

Use the short syntax <>...</> for most cases, or <React.Fragment key={id}>...</React.Fragment> when you need a key in a list.

function TableRow({ cells }) {
  return (
    <>
      {cells.map(cell => (
        <td key={cell.id}>{cell.value}</td>
      ))}
    </>
  );
}

Without fragments, you'd need a wrapper that would break valid <table> structure.

Fragment Syntax Options

// Short syntax (no key allowed)
<>
  <Title />
  <Content />
</>

// Full syntax (supports key)
import { Fragment } from 'react';
<Fragment key={item.id}>...</Fragment>

• Short syntax <>...</> cannot accept props including key.
• Use <Fragment key={...}> when mapping groups that need keys.
• Fragments do not appear in the DOM or React DevTools tree as nodes.
• Prefer fragments over meaningless wrapper divs.

Fragment Quick Reference

When and how to use React Fragments.

Fragments vs Wrapper Divs

Use a <div> when you need a hook for CSS (margin, flex child) or a semantic container. Use a fragment when the extra node would interfere with layout or HTML validity.

Returning Arrays from Components

You can return an array of elements directly from a component, each with a key. Fragments are usually clearer, but arrays work for flat lists without a wrapper.

function Breadcrumbs({ items }) {
  return items.map((item, i) => (
    <Fragment key={item.href}>
      {i > 0 && ' / '}
      <a href={item.href}>{item.label}</a>
    </Fragment>
  ));
}

Common Mistakes

• Using <> when a key is required in a list.
• Adding wrapper divs that break CSS grid/flex on parent.
• Nesting fragments unnecessarily when one suffices.
• Using fragments inside <table> incorrectly — only <td>/<th> belong in rows.

Key Takeaways

• Fragments group JSX without extra DOM nodes.
• Short syntax <> is ideal when no key is needed.
• Use <Fragment key={...}> for keyed list groups.
• Prefer fragments over meaningless wrapper divs.