When are you REQUIRED to use instead of the shorthand <>?

When you need to pass a 'key' prop (e.g., inside a .map() loop)

When returning more than 5 elements

Topic 7 of 53

React Fragments

Q: Why does React require components to return a single parent element?

JSX is transformed into `React.createElement(type, props, children)`. A JavaScript function can only return a single value. Returning multiple adjacent JSX tags is equivalent to writing `return a; return b;`, which is invalid JavaScript syntax.

Q: What is the specific advantage of using a Fragment over a standard wrapper?

A ` ` renders an actual node in the browser DOM. Excessive wrapper divs bloat the DOM tree, consume memory, and can break specific CSS layouts (like flexbox containers expecting direct children) or HTML semantics (like ` ` needing to be direct children of ` `). Fragments solve the React syntax requirement without adding any nodes to the real DOM.

Overview

Because JSX is ultimately converted into a JavaScript function call (React.createElement), a component is strictly required to return a single root element. If you try to return two adjacent <h1> and <p> tags, React will throw an error because a function cannot return two separate objects simultaneously.

Historically, developers solved this by wrapping adjacent elements inside a generic <div> tag. However, doing this repeatedly clutters the actual DOM with hundreds of useless, empty <div> containers. This phenomenon, known as 'div soup', can actively break CSS Grid/Flexbox layouts and negatively impact semantic HTML accessibility.

React Fragments (<React.Fragment> or the shorthand <>...</>) solve this problem. A Fragment allows you to group multiple sibling elements together to satisfy React's single-root rule, but the Fragment itself completely disappears when rendering to the actual browser DOM, leaving zero extra markup behind.

Syntax

The Shorthand Syntax (Most Common)

jsx

function ArticleHeader() {
  return (
    <> {/* This is the Fragment shorthand */}
      <h1>Understanding React</h1>
      <p>Written by Kartik</p>
      <hr />
    </>
  );
}

The Full Syntax (Required for Keys)

jsx

import { Fragment } from 'react';

function FeatureList({ features }) {
  return (
    <dl>
      {features.map(feature => (
        // Shorthand <> cannot take attributes. You MUST use full <Fragment> if mapping lists requires a 'key'
        <Fragment key={feature.id}>
          <dt>{feature.name}</dt>
          <dd>{feature.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

Common Pitfalls

Using shorthand `<>` in loops: When iterating over an array to render elements, every repeated node needs a unique key prop. The shorthand syntax <></> does not accept props. You must import and use the full <Fragment key={id}> syntax when mapping.

Interview Questions

Why does React require components to return a single parent element?

JSX is transformed into React.createElement(type, props, children). A JavaScript function can only return a single value. Returning multiple adjacent JSX tags is equivalent to writing return a; return b;, which is invalid JavaScript syntax.

What is the specific advantage of using a Fragment over a standard <div> wrapper?

A <div> renders an actual node in the browser DOM. Excessive wrapper divs bloat the DOM tree, consume memory, and can break specific CSS layouts (like flexbox containers expecting direct children) or HTML semantics (like <li> needing to be direct children of <ul>). Fragments solve the React syntax requirement without adding any nodes to the real DOM.

Real-World Example

Fixing Broken CSS Grid Layouts: In CSS Grid or Flexbox, layout rules only apply to direct children. If StatsWidget wrapped its 3 cards in a <div>, the Grid would treat it as 1 single item instead of 3. Fragments ensure the 3 cards pop out seamlessly into the parent Grid.

example

jsx

function DashboardGrid() {
  return (
    <div className="grid-container">
      <Sidebar />
      {/* If Stats Widget returned a wrapper <div>, it would break the grid. 
          By returning a Fragment, the 3 stat cards become direct children of the grid! */}
      <StatsWidget /> 
    </div>
  );
}

function StatsWidget() {
  return (
    <>
      <div className="card">Users: 100</div>
      <div className="card">Sales: $50</div>
      <div className="card">Bounce: 2%</div>
    </>
  );
}

Check Your Knowledge

Test your understanding of React Fragments with these quick questions.

What is the primary purpose of a React Fragment?

When are you REQUIRED to use <Fragment> instead of the shorthand <>?

Take React.js Quiz

Overview

Syntax

The Shorthand Syntax (Most Common)

jsx

function ArticleHeader() {
  return (
    <> {/* This is the Fragment shorthand */}
      <h1>Understanding React</h1>
      <p>Written by Kartik</p>
      <hr />
    </>
  );
}

The Full Syntax (Required for Keys)

jsx

import { Fragment } from 'react';

function FeatureList({ features }) {
  return (
    <dl>
      {features.map(feature => (
        // Shorthand <> cannot take attributes. You MUST use full <Fragment> if mapping lists requires a 'key'
        <Fragment key={feature.id}>
          <dt>{feature.name}</dt>
          <dd>{feature.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

Interview Questions

Why does React require components to return a single parent element?

What is the specific advantage of using a Fragment over a standard <div> wrapper?

Real-World Example

example

jsx

function DashboardGrid() {
  return (
    <div className="grid-container">
      <Sidebar />
      {/* If Stats Widget returned a wrapper <div>, it would break the grid. 
          By returning a Fragment, the 3 stat cards become direct children of the grid! */}
      <StatsWidget /> 
    </div>
  );
}

function StatsWidget() {
  return (
    <>
      <div className="card">Users: 100</div>
      <div className="card">Sales: $50</div>
      <div className="card">Bounce: 2%</div>
    </>
  );
}

Check Your Knowledge

Test your understanding of React Fragments with these quick questions.