What Is React Fragment? - ReactJS Tutorials

When you’re returning more than one element from React component, you usually wrap them in a <div> tag.
But doing with this method it has adding extra tags in HTML (DOM) and some time you don’t want this for layout or styling reasons.

So instead of <div> tag, you can use Fragments to group multiple elements without adding anything extra to the HTML.

Fragments are represented by <React.Fragment> or the short syntax <> </>.

For example, if you want to return multiple elements from a component, instead of wrapping them in a div or another element, you can use a fragment:

import React from 'react';

function WelcomeNote() {
  return (
    <React.Fragment>
      <h2>Greetings, Visitor!</h2>
      <p>This is a quick intro to using React Fragments effectively.</p>
    </React.Fragment>
  );
}

// Using the shorthand syntax
function WelcomeNoteCompact() {
  return (
    <>
      <h2>Greetings, Visitor!</h2>
      <p>This is a quick intro to using React Fragments effectively.</p>
    </>
  );
}

In both examples:

The <React.Fragment> tag (its short tag = <>) is used to group the <h2> and <p> elements together, allow the component to return multiple elements without wrapping them into unnecessary <div> tag.
Fragments don’t render any extra tags in the DOM, they help maintain a clean and minimal HTML structure, which is specially useful for layout styling and performance.

Why Use React Fragments?

React fragments offer several advantages in component development:

Cleaner DOM Structure: If you return multiple elements, you might wrap them in to <div> tag. By removing unnecessary wrapper elements, fragments keep the DOM structure clean and free of extra nodes.
Simplified Layouts and Styling: Excessive wrapper elements can complicate CSS styling and layouts. Fragments reduce this complexity.
Improved Performance: Since fragments do not create additional DOM nodes, they reduce the memory footprint and improve rendering performance, especially in large or complex applications.
Better Accessibility: Excessive wrappers can interfere with screen readers and other accessibility tools. Fragments help to ensure a more accessible DOM by reducing irrelevant nodes.

Using React Fragments

Basic Usage

The simple way to use fragments is with the short syntax <> </>. This syntax allows you to write cleaner code, Like below:

javascriptCopy codefunction List() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </>
  );
}

In this example, List returns three <li> elements wrapped in a fragment without adding an extra node. This is specially useful when returning lists of items or elements where additional wrappers would interfere with layouts or styling.

Using the Full <React.Fragment> Syntax

In cases where you need to add properties to a fragment, you should use the full <React.Fragment> syntax. For example, when working with lists that require a key attribute:

import React from 'react';

function ItemDisplay({ items }) {
  return (
    <ul>
      {items.map(entry => (
        <React.Fragment key={entry.code}>
          <li>{entry.title}</li>
          <li>{entry.cost}</li>
        </React.Fragment>
      ))}
    </ul>
  );
}

// Usage
const itemList = [
  { code: 101, title: 'Item Alpha', cost: '₹150' },
  { code: 102, title: 'Item Beta', cost: '₹220' },
];

// Render
<ItemDisplay items={itemList} />

Here:

React.Fragment allows you to assign a key attribute to each group of li elements.
This avoids using an extra div for each product, with cleaner DOM.

When to Use React Fragments

Fragments are specially useful in the below conditions:

Returning Multiple Elements from a Component: When you need to return multiple sibling elements but don’t want to introduce unnecessary DOM nodes.
Nested Components: Fragments are beneficial for components with nested structures, such as layout components, where wrapper elements can disrupt the design or CSS styles.
Lists with Sibling Elements: When rendering lists that contain multiple sibling elements, fragments keep the DOM clean and accessible by avoiding unnecessary <div> elements.
Table Rows: Using fragments in tables is particularly useful because wrapping elements in a div inside a <table> is not valid HTML. Fragments allow you to wrap multiple <td> elements without disrupting the table structure.
Example: Using Fragments in a Table

import React from 'react';

function StudentTable() {
  return (
    <table>
      <thead>
        <tr>
          <th>Student</th>
          <th>Score</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alice</td>
          <td>85</td>
        </tr>
        <tr>
          <td>Bob</td>
          <td>90</td>
        </tr>
      </tbody>
    </table>
  );
}

In this example:
- React.Fragment ensures the each pair of elements is grouped without adding extra
  elements, serve valid HTML structure with the table.

Advantages and Limitations of React Fragments

Advantages

Efficiency: Making the application more efficient and Fragments prevent the addition of unnecessary DOM nodes.
Cleaner Structure: The DOM structure remains more manageable, enhance readability and accessibility.
Flexible Grouping: Fragments make it easy to group multiple elements without impacting layout or styles.

Limitations

No Attributes in Short Syntax: The short <> </> syntax doesn’t support attributes like key. Use <React.Fragment> when attributes are necessary.
Limited Use Case: Fragments are only helpful for grouping elements without rendering new DOM nodes. They are not a replacement for elements that require styling or functional grouping.

What Are React Fragments?