← Back to Chapters

React Fragments

⚛️ React Fragments

In React, every component must return a single parent element. Sometimes you just want to group multiple elements without adding an extra <div> (or any other wrapper) to the DOM. This is where Fragments help.

A Fragment lets you wrap multiple JSX elements without creating an additional node in the DOM structure. The UI looks the same, but the HTML stays cleaner and more semantic.

? Key Concepts

  • React components can only return one parent element.
  • Fragments group multiple JSX elements without adding extra DOM nodes.
  • Shorthand syntax: <> ... </> (no attributes allowed).
  • Full syntax: <React.Fragment> ... </React.Fragment> (can use attributes like key).
  • Fragments keep your HTML structure clean and can slightly improve performance.

? Example Without Fragment (Extra <div>)

Here, we use a wrapper <div> just to return a single parent. It works, but it adds an unnecessary node to the DOM.

? View Code Example 
// Component with an extra wrapper div
function Example() {
  return (
    <div>
      <h2>Title</h2>
      <p>This adds an unnecessary extra <div>.</p>
    </div>
  );
}

? DOM Output

The rendered HTML will look like:

<div>
  <h2>Title</h2>
  <p>This adds an unnecessary extra <div>.</p>
</div>

If this component is nested inside another layout, you might end up with many unnecessary <div> tags.

✅ Using Fragments Instead (Shorthand <> </>)

With a Fragment, the JSX still returns a single parent, but that parent does not exist in the DOM.

? View Code Example 
// Component using a Fragment instead of a div
function Example() {
  return (
    <>
      <h2>Title</h2>
      <p>Now we use a Fragment instead of an extra <div>.</p>
    </>
  );
}

? DOM Output (With Fragment)

The rendered HTML will now be:

<h2>Title</h2>
<p>Now we use a Fragment instead of an extra <div>.</p>

No extra wrapper tag is added — the Fragment is invisible in the DOM, but React is still happy because it got a single parent.

? Using React.Fragment Explicitly

The longer form React.Fragment is useful when you need to pass attributes, especially the key prop while rendering lists.

? View Code Example 
// Using a Fragment to return multiple table rows
function TableRows() {
  return (
    <>
      <tr>
        <td>1</td>
        <td>Aarav</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Maya</td>
      </tr>
    </>
  );
}

// Using React.Fragment explicitly with a key
function Columns() {
  return (
    <React.Fragment key="col1">
      <td>Name</td>
      <td>Age</td>
    </React.Fragment>
  );
}

? Why Use React.Fragment Here?

  • Inside tables, you often need to return multiple <tr> or <td> elements without wrapping them in a <div>.
  • <React.Fragment key="..."> lets you attach a key when rendering a list of fragments.
  • This keeps your table markup valid and clean.

⚙️ When to Use Fragments

  • ✅ To avoid unnecessary HTML wrappers like <div>.
  • ✅ To return multiple sibling elements from a component.
  • ✅ When rendering table rows or list items without altering structure.
  • ✅ To keep your DOM clean and semantically correct.
  • ✅ When you care about minimal DOM nodes and slightly better performance.

⚠️ Important Notes

  • Shorthand syntax <> cannot have attributes (no key, no className, etc.).
  • Use <React.Fragment> when you need attributes like key.
  • Fragments do not create DOM nodes — they’re invisible wrappers.
  • Fragments help keep HTML structures (especially tables and lists) valid and clean.

? Tips

  • Use Fragments by default when returning multiple sibling elements.
  • Prefer shorthand <>...</> for quick, clean JSX.
  • Switch to React.Fragment only when you need a key or other attributes.
  • Inspect the DOM in DevTools to see how Fragments keep your HTML minimal.

? Try It Yourself

  1. Create a component named ProfileInfo that returns your name, age, and city wrapped in a Fragment (use the shorthand <>).
  2. Create another component UserTable that displays multiple rows using React.Fragment with key props for each row.
  3. Open your browser’s Elements/Inspector tab and verify that no extra <div> tags are created around your rows or profile.
  4. Try mixing shorthand and explicit Fragment syntax in one project to understand when each is more convenient.

Goal: Learn how to use Fragments (<> and React.Fragment) to group multiple JSX elements without adding unnecessary DOM nodes, keeping your code and HTML clean and efficient.