What are fragments in React? | Interview Question

Q: What are fragments in React?

**Target Audience:** Engineers preparing for React interviews — assumes basic JSX. **Difficulty:** Easy > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The DOM output in section 3 was produced by rendering both versions in React 19.2.8 and reading back the real HTML. ## 1. Why This Even Matters — A Story First You need to post three documents. The post office insists on one item, so you put them in an envelope. Fine — except the recipient files documents in a cabinet with slots sized to a sheet of paper, and now everything arrives inside an envelope that does not fit the slots. A Fragment is a rubber band. It holds the three sheets together long enough to hand them over, then it is gone. Nothing downstream ever knows it existed. ## 2. The Core Idea 📌 **Interview term: Fragment** — a wrapper that groups multiple children **without producing a DOM element**. It exists purely to satisfy the rule that a co

01

Understand the problem

Question presented to candidate: "A component needs to return two sibling elements. What are your options, and why would you reach for a Fragment?"

What a strong answer should cover:

A component returns one value, so multiple siblings need a single parent — a Fragment is that parent without the DOM cost.
A Fragment renders no DOM node at all; children land directly in the parent element.
Two syntaxes: the shorthand <>...</> and the explicit <Fragment>...</Fragment>.
The shorthand cannot take a key. Mapping over a list that emits sibling pairs requires the long form.
Why the wrapper div actually matters: it breaks CSS layout contracts (flex/grid parent-child relationships), produces invalid HTML inside <table>, <dl>, <ul>, and adds depth to the DOM.
Fragment is exported from both react and react/jsx-runtime — the same symbol.
Nuance: Fragments accept only key and children; no className, no style, no ref.

Clarifying questions expected:

"Is this inside a list where each item emits multiple siblings?" — that decides shorthand versus long form.

Code / implementation expected: Yes — a keyed Fragment inside a map is the case worth showing.

fragmentsdomjsxrendering

02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Target Audience: Engineers preparing for React interviews — assumes basic JSX. Difficulty: Easy

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The DOM output in section 3 was produced by rendering both versions in React 19.2.8 and r

Solution ready — 2 min read

Classified // press E to declassify

04

Explore the playground snippets

Keyed Fragments in a definition list, and what a wrapper div breaks

Run Playground

import { Fragment, useState } from "react";

const ROWS = [
  { id: 1, term: "Fragment", def: "Groups children with no DOM node" },
  { id: 2, term: "Element", def: "The frozen object a component returns" },
];

export default function App() {
  const [wrap, setWrap] = useState(false);

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6 }}>
      <h3>A definition list has no legal wrapper element</h3>
      {/* Each row emits a <dt> AND a <dd>. A <div> here would be invalid HTML,
          so a keyed Fragment is the only correct option. The shorthand <></>
          cannot take a key, hence the explicit form. */}
      <dl style={{ border: "1px solid #ddd", borderRadius: 8, padding: 12 }}>
        {ROWS.map((r) => (
          <Fragment key={r.id}>
            <dt style={{ fontWeight: 600 }}>{r.term}</dt>
            <dd style={{ margin: "0 0 8px 16px", color: "#555" }}>{r.def}</dd>
          </Fragment>
        ))}
      </dl>

      <h3>Flex styles direct children only</h3>
      <label style={{ display: "block", marginBottom: 8 }}>
        <input type="checkbox" checked={wrap} onChange={(e) => setWrap(e.target.checked)} />{" "}
        wrap the items in a div instead of a Fragment
      </label>

      <div style={{ display: "flex", gap: 8, border: "2px dashed #4f46e5", padding: 8 }}>
        {wrap ? (
          // The div becomes the single flex item; the boxes inside it stack.
          <div>
            <Box label="one" />
            <Box label="two" />
            <Box label="three" />
          </div>
        ) : (
          // Each box is a direct child, so each is its own flex item.
          <>
            <Box label="one" />
            <Box label="two" />
            <Box label="three" />
          </>
        )}
      </div>
      <p style={{ color: "#666", fontSize: 13 }}>
        Tick the box: with a div in the way the three boxes stop being flex
        items and stack vertically, because flex applies to direct children.
      </p>
    </div>
  );
}

function Box({ label }) {
  return (
    <span style={{ background: "#eef", border: "1px solid #99f", borderRadius: 6, padding: "6px 12px" }}>
      {label}
    </span>
  );
}

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.