Fragments

Fragments

A component returns one value, but the markup you need often has several siblings and no natural parent. A <div> wrapper solves the JavaScript problem and creates a DOM problem: it breaks <table>, <dl>, <select> and every flex or grid layout that expects direct children. A Fragment groups elements without emitting a node.

The short form <>...</> is what you write almost always. It takes no attributes at all, so a fragment that comes out of .map() and needs a key must use the imported long form — the one case where <Fragment key={...}> is required.

The two fragment forms, and where each one is neededJavaScript

import { Fragment } from 'react';
function Field({ label, value }) {          // <dt>/<dd> must be siblings inside <dl>
  return <><dt>{label}</dt><dd>{value}</dd></>;
}
function Specs({ rows }) {                  // a keyed fragment needs the long form
  return (
    <dl>{rows.map(r =>
      <Fragment key={r.id}><dt>{r.label}</dt><dd>{r.value}</dd></Fragment>)}
    </dl>
  );
}

Fragments are real nodes in React 7,897 's internal tree even though they leave nothing in the DOM, so state inside one survives re-renders exactly as it would inside a <div> — but swapping <div> for <> between two renders changes the tree shape and does reset the subtree. React 19.3.0 added fragment refs: a ref on a <Fragment> yields a FragmentInstance with addEventListener, focus, getClientRects and observer helpers covering all the sibling nodes at once, with no wrapper (Fragment Refs).

MENU