React

What are React Fragments used for?

The short answer

React Fragments let you group a list of children elements without adding an extra node to the DOM. Instead of wrapping everything in a <div> just to satisfy React's single-root-element rule, you use a Fragment, and it disappears from the final HTML entirely.

The problem Fragments solve

React components must return a single root element. If you try to return two sibling elements, you get a syntax error:

// This doesn't work — two siblings, no wrapper
function UserInfo() {
  return (
    <h1>Sarah</h1>
    <p>Software Engineer</p>
  );
}

The most common workaround used to be wrapping everything in a <div>:

function UserInfo() {
  return (
    <div>
      <h1>Sarah</h1>
      <p>Software Engineer</p>
    </div>
  );
}

That works, but now you've added a <div> to the DOM that has no purpose. It's there purely to make React happy. One extra div might not seem like a big deal, but these add up — and they cause real problems.

Why extra DOM nodes matter

Those unnecessary wrapper divs aren't just clutter. They can actively break things.

CSS layouts break. If you're using Flexbox or CSS Grid, the layout depends on the parent-child relationship between elements. An extra wrapper div between the flex container and its items changes the layout entirely.

// The parent expects direct <td> children
function TableRow() {
  return (
    <tr>
      <Columns />
    </tr>
  );
}

// But this adds an invalid <div> inside a <tr>
function Columns() {
  return (
    <div>
      <td>Name</td>
      <td>Age</td>
    </div>
  );
}

That <div> inside a <tr> produces invalid HTML. The browser might render it, but the behavior is undefined and it'll look wrong.

Accessibility suffers. Screen readers and assistive technologies parse the DOM structure to understand the page. Extra meaningless divs add noise and can interfere with how assistive tools interpret your content.

Performance degrades. More DOM nodes means more work for the browser during layout, painting, and reflow. In large apps with lots of components, these extra nodes compound.

The Fragment solution

Fragments let you group elements without adding anything to the DOM:

function UserInfo() {
  return (
    <React.Fragment>
      <h1>Sarah</h1>
      <p>Software Engineer</p>
    </React.Fragment>
  );
}

The rendered HTML is just:

<h1>Sarah</h1>
<p>Software Engineer</p>

No wrapper. No extra node. The Fragment vanishes.

The shorthand syntax

Because Fragments are so common, React provides a shorthand — empty angle brackets:

function UserInfo() {
  return (
    <>
      <h1>Sarah</h1>
      <p>Software Engineer</p>
    </>
  );
}

This is the syntax you'll see in most codebases. It's cleaner and does exactly the same thing as <React.Fragment>.

When you need the long form

The shorthand <>...</> doesn't support attributes. The only attribute a Fragment accepts is key, and you need the long form to use it. This comes up when rendering lists:

function Glossary({ items }) {
  return (
    <dl>
      {items.map((item) => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.definition}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

Each pair of <dt> and <dd> needs a key for React's reconciliation, but wrapping them in a <div> would produce invalid HTML inside a <dl>. The keyed Fragment is the right tool here — it groups the pair, passes the key to React, and doesn't add any DOM nodes.

A practical before and after

Let's say you have a table component:

// Before — with wrapper div (broken HTML)
function Columns() {
  return (
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  );
}

function Table() {
  return (
    <table>
      <tbody>
        <tr>
          <Columns />
        </tr>
      </tbody>
    </table>
  );
}
// After — with Fragment (valid HTML)
function Columns() {
  return (
    <>
      <td>Hello</td>
      <td>World</td>
    </>
  );
}

function Table() {
  return (
    <table>
      <tbody>
        <tr>
          <Columns />
        </tr>
      </tbody>
    </table>
  );
}

The Fragment version produces a clean <tr> with two <td> children, exactly as HTML expects.

Why interviewers ask this

Fragments are a simple concept, but the question tests whether you understand why they exist — that React requires a single root, that extra DOM nodes have real consequences for layout, accessibility, and performance, and that you know when to use the shorthand vs the keyed form. It's a quick way to check that you're writing thoughtful, clean markup rather than just wrapping everything in divs.

Table of Contents