In React, every component must return a single parent element. This rule exists because JSX expressions must evaluate to one root element. However, in many real-world scenarios, adding an extra wrapper element like a div is unnecessary and can cause problems with styling, layout, or semantics. React Fragments solve this problem.

A React Fragment allows you to group multiple elements together without introducing an extra HTML element into the DOM. This keeps the DOM structure clean while still satisfying React’s requirement of a single return element.

Problem Without Fragments

Consider a component that needs to return two sibling elements:

function Message() {
  return (
    <h1>Hello</h1>
    <p>Welcome to React</p>
  );
}

This code will throw an error because JSX requires a single parent element.

A common workaround is to wrap elements in a div:

function Message() {
  return (
    <div>
      <h1>Hello</h1>
      <p>Welcome to React</p>
    </div>
  );
}

While this works, it adds an extra div to the DOM, which may not always be desirable.

Using React Fragments

React Fragments allow you to group elements without adding an extra DOM node.

Example using Fragment syntax:

import React from "react";

function Message() {
  return (
    <React.Fragment>
      <h1>Hello</h1>
      <p>Welcome to React</p>
    </React.Fragment>
  );
}

This renders both elements without adding an extra wrapper element in the DOM.

Short Syntax for Fragments

React also provides a shorthand syntax for fragments, which is more commonly used:

function Message() {
  return (
    <>
      <h1>Hello</h1>
      <p>Welcome to React</p>
    </>
  );
}

This shorthand behaves exactly like React.Fragment but is cleaner and easier to read.

Fragments with Lists and Keys

Fragments are especially useful when rendering lists where multiple elements are returned for each item.

Example:

function List() {
  const items = ["A", "B", "C"];

  return (
    <ul>
      {items.map(item => (
        <>
          <li>{item}</li>
          <li>Details</li>
        </>
      ))}
    </ul>
  );
}

However, when using fragments inside a list, a key is required. The shorthand syntax does not support keys, so the full Fragment syntax must be used.

Correct example with key:

{items.map(item => (
  <React.Fragment key={item}>
    <li>{item}</li>
    <li>Details</li>
  </React.Fragment>
))}

Real-World Scenario

Fragments are commonly used in table layouts. HTML tables require specific structures like tr, td, and th. Adding extra wrapper elements can break table rendering. Fragments allow developers to return multiple table cells without inserting invalid HTML.

Example:

function TableRow() {
  return (
    <>
      <td>John</td>
      <td>Developer</td>
    </>
  );
}

This component can be safely used inside a tr element.

Important Notes and Best Practices

Fragments do not support attributes like className or style. If you need to apply styling or attributes, a real DOM element must be used instead. Use fragments when grouping elements purely for structure, not for styling or layout.

Avoid unnecessary wrapper elements whenever possible to keep the DOM clean and improve readability.

In summary, React Fragments are a powerful feature that allows components to return multiple elements without adding extra DOM nodes. They help maintain clean HTML, prevent layout issues, and make React components more efficient and readable.