Skip to main content

JSX Single Root Element: Fragments Guide

JSX enforces a single root element rule because JavaScript functions can only return one value. React provides Fragment and the <> shorthand syntax to group multiple elements without adding extra DOM nodes, solving the "div-itis" problem and keeping your DOM structure clean.

Key Takeaways​

  • A React component's return statement can only return one JSX element because it translates to a single React.createElement() call
  • Wrapping multiple elements in a <div> works but pollutes the DOM; use <>...</> Fragments by default
  • The <React.Fragment> syntax is required when you need to pass a key prop (e.g., in lists)
  • Fragments are invisible wrappers—they render no extra HTML element in the final DOM tree

The "One Return Value" Rule​

The core reason for this JSX rule is rooted in plain JavaScript. A JavaScript function can only return a single value.

// This is valid - returns one object
function getOneThing() {
  return { message: 'Hello' };
}

// This is INVALID - you can't return two separate objects
function getTwoThings() {
  // return { message: 'Hello' }, { message: 'World' }; // Syntax Error!
}

JSX is syntactic sugar for React.createElement() calls, which return JavaScript objects. Therefore, a React component's return statement can only return a single JSX element, because it is ultimately returning a single object. Trying to return two adjacent elements is like trying to return two values from a function—it is not allowed.

The Problem in Practice:

This code will produce an error:

// This will cause an error!
function Post() {
  return (
    <h1>About This Blog</h1>
    <p>It's a great blog!</p>
  );
}

The error message will be clear: JSX expressions must have one parent element.

Solution 1: The div Wrapper​

The most intuitive solution is to wrap the adjacent elements in a single parent container, like a div.

// This works!
function Post() {
  return (
    <div>
      <h1>About This Blog</h1>
      <p>It's a great blog!</p>
    </div>
  );
}

This works perfectly because the component now returns a single <div> element, which contains the other elements as children. The drawback: this approach introduces an extra <div> into the DOM. While often harmless, it can interfere with CSS styling (especially with Flexbox or Grid layouts) or create invalid HTML (for example, you cannot put a <div> inside a <table> in certain places). This problem is often referred to as "div-itis."

Solution 2: React.Fragment​

To solve the "div-itis" problem, React provides a special component called React.Fragment. A Fragment lets you group a list of children without adding an extra node to the DOM.

import React from 'react';

function Post() {
  return (
    <React.Fragment>
      <h1>About This Blog</h1>
      <p>It's a great blog!</p>
    </React.Fragment>
  );
}

This code is valid, and when it renders, the <h1> and <p> will be direct siblings in the DOM, with no wrapper div. The Fragment component is rendered during JSX transformation but produces zero actual DOM elements.

The Shorthand Fragment Syntax: <>​

Writing React.Fragment is verbose, so JSX offers a much cleaner, shorter syntax: <>...</>. This is the modern, preferred way to use Fragments today.

// The modern, clean way
function Post() {
  return (
    <>
      <h1>About This Blog</h1>
      <p>It's a great blog!</p>
    </>
  );
}

This code is functionally identical to the React.Fragment example but is easier to read and write. The shorthand syntax was introduced in React 16.2.0 (2018) and has become the standard for grouping elements without DOM pollution.

When to Use the Full Fragment Syntax​

There is one important case where you cannot use the shorthand <> syntax: when you need to pass a key prop to the Fragment.

This typically happens when you are rendering a list of Fragments in a loop. React requires a unique key for each item in a list to track it efficiently. The shorthand syntax does not support attributes, so you must use the full React.Fragment syntax.

import React from 'react';

const articles = [
  { id: 1, title: 'First Post', content: 'This is the first post.' },
  { id: 2, title: 'Second Post', content: 'This is the second one.' },
];

function ArticleList() {
  return (
    <>
      {articles.map(article => (
        // We need a key here, so we must use the full Fragment syntax
        <React.Fragment key={article.id}>
          <h2>{article.title}</h2>
          <p>{article.content}</p>
        </React.Fragment>
      ))}
    </>
  );
}

export default ArticleList;

In this example, using <React.Fragment key={article.id}> is necessary. Trying to do <key={article.id}> would result in a syntax error because the shorthand syntax does not accept props.

Best Practices for JSX Elements​

  • Default to Fragments: When you need to return multiple elements, your first choice should be the shorthand Fragment (<>...</>). It has zero performance penalty and keeps the DOM clean.
  • Use div for Semantic Grouping or Styling: Only use a div or another container element if you actually need a wrapper for styling (e.g., applying a CSS class, a margin, or using it as a flex container) or for semantic HTML reasons (e.g., wrapping a form).
  • Use <React.Fragment> for Lists: Remember to switch to the explicit <React.Fragment> syntax when you need to provide a key to a list of grouped elements. This is essential for React's reconciliation algorithm.

Frequently Asked Questions​

What is a JSX Fragment?​

A Fragment is a React component that groups multiple child elements without rendering an extra DOM node. Use Fragments when you need to return multiple elements but do not want to add a wrapper div to the DOM. The shorthand syntax <>...</> is the most common way to write Fragments in modern React.

Can I use Fragment with a CSS class or style?​

No, the shorthand Fragment syntax <>...</> does not accept props (like className or style). If you need to style a container, use a <div> instead. If you need to group elements without a DOM node, you cannot apply styles directly—style the child elements individually or use the full <React.Fragment> syntax (though even then, Fragment does not render styles).

When should I choose Fragment over div?​

Use a Fragment when you are grouping multiple elements purely for structural reasons and do not need the wrapper element for styling or semantic purposes. Use a div when you need a container for styling, layout (Flexbox/Grid), or semantic HTML meaning (e.g., a form wrapper).

Do Fragments have any performance benefits?​

Yes, Fragments have a small performance benefit because they avoid rendering an extra DOM node. This is especially noticeable when rendering many lists of Fragments. One less DOM node means less memory and faster rendering by the browser.

Can I use a Fragment at the top level of my component?​

Yes. Any React component can return a Fragment at the top level. This is especially useful for components that return multiple elements, such as a list of items or a group of form fields, without polluting the DOM with wrapper elements.

Further Reading​

Glossary​

  • Root Element: The single, top-level element that a component returns. All other elements must be nested inside it.
  • Fragment: A special React component that allows you to group a list of children without adding extra nodes to the DOM.
  • Shorthand Fragment Syntax (<>...</>): A concise way to write a React.Fragment that does not require a key.