Fragment in React Explained – What Are React Fragments?

Fragment is a React component for grouping multiple elements without introducing additional nodes to the DOM tree. It keeps the DOM clean and free from unnecessary wrapper elements.

The Syntax of React Fragments

Fragments have two syntaxes:

• The explicit syntax: <Fragment>...</Fragment>
• The shorthand syntax: <>...</>

Most projects use the shorthand syntax for its simplicity. Use the explicit syntax when you need props like key or ref on the Fragment component.

Why Use React Fragments?

React components can only output a single element. So, returning two or more JSX elements requires wrapping them in a single parent wrapper. If you don’t, React throws an error.

Example: Use a <div> container as a wrapper

import { createRoot } from "react-dom/client";

function TwoInnerUIs() {
  return (
    <div>
      <h1>My name is Oluwatobi.</h1>
      <button>☕ Buy me a coffee</button>
    </div>
  );
}

const root = createRoot(document.getElementById("root"));
root.render(<TwoInnerUIs />);

Try it on CodeSandbox

The snippet above uses a <div> to group two JSX elements because React components can return only a single element.

Tip

Inspect the component above in your browser dev tools. You will see that React rendered the <h1> and <button> DOM nodes as children of the <div> element.

The primary drawback of using a wrapper node, such as a <div>, to group JSX elements is that it often creates redundant DOM containers. Using Fragments avoids these issues.

Fragment groups multiple elements without adding extra DOM nodes. This ensures an efficient DOM, making styling and layout management easier.

Example: Use the explicit React Fragment as a wrapper

import { Fragment } from "react";
import { createRoot } from "react-dom/client";

function TwoInnerUIs() {
  return (
    <Fragment>
      <h1>My name is Oluwatobi.</h1>
      <button>☕ Buy me a coffee</button>
    </Fragment>
  );
}

const root = createRoot(document.getElementById("root"));
root.render(<TwoInnerUIs />);

Try it on CodeSandbox

The snippet above does the following:

• Explicitly imports the Fragment component from the React library.
• Uses the <Fragment> component to group the <h1> and <button> items. This makes React render the grouped elements without adding a wrapper node to the DOM.

Tip

Inspect the component above in your browser dev tools. You will see that React rendered the <h1> and <button> nodes without a parent container.

You can alternatively use the shorthand syntax.

Example: Use the shorthand React Fragment as a wrapper

import { createRoot } from "react-dom/client";

function TwoInnerUIs() {
  return (
    <>
      <h1>My name is Oluwatobi.</h1>
      <button>☕ Buy me a coffee</button>
    </>
  );
}

const root = createRoot(document.getElementById("root"));
root.render(<TwoInnerUIs />);

Try it on CodeSandbox

The snippet above demonstrates the usage of the shorthand Fragment syntax to group the <h1> and <button> elements, enabling React to render them as siblings in the DOM without an additional wrapper element.

Tip

Inspect the component above in your browser dev tools. You will see that React rendered the <h1> and <button> DOM nodes without a wrapper parent.