React Fragments – web4learners.com

When creating React components, you will often need to return multiple elements together.

For example, you may want a component to return:

<h1>React</h1>
<p>Learn React step by step.</p>
<button>Start Learning</button>

However, a React component must return a single parent structure.

A common solution is to wrap the elements inside a <div>:

function Course() {
  return (
    <div>
      <h1>React</h1>
      <p>Learn React step by step.</p>
      <button>Start Learning</button>
    </div>
  );
}

This works, but sometimes you do not actually need that extra <div> in the HTML.

That is where React Fragments are useful.

A Fragment allows you to group multiple JSX elements together without adding an extra DOM element.

What Is a React Fragment?

A React Fragment is a wrapper that lets a component return multiple elements without creating an additional HTML element in the browser’s DOM.

For example:

function Course() {
  return (
    <>
      <h1>React</h1>
      <p>Learn React step by step.</p>
      <button>Start Learning</button>
    </>
  );
}

The <> and </> syntax represents a Fragment.

The browser receives the elements without an additional wrapper:

<h1>React</h1>
<p>Learn React step by step.</p>
<button>Start Learning</button>

There is no extra <div> surrounding them.

Why Do We Need Fragments?

React components commonly need to return multiple elements.

Without a Fragment, you might write:

function Profile() {
  return (
    <div>
      <h2>Arafat</h2>
      <p>Frontend Developer</p>
    </div>
  );
}

The resulting HTML contains an unnecessary wrapper:

<div>
  <h2>Arafat</h2>
  <p>Frontend Developer</p>
</div>

With a Fragment:

function Profile() {
  return (
    <>
      <h2>Arafat</h2>
      <p>Frontend Developer</p>
    </>
  );
}

The resulting DOM contains only:

<h2>Arafat</h2>
<p>Frontend Developer</p>

The Fragment groups the elements for React without creating another DOM node.

The Short Fragment Syntax

The most commonly used Fragment syntax is:

<>
  <h1>Hello</h1>
  <p>Welcome to React.</p>
</>

The opening:

<>

and closing:

</>

represent the Fragment.

This is called the short Fragment syntax.

It is the simplest way to use a Fragment.

The Explicit Fragment Syntax

React also provides an explicit Fragment component:

import { Fragment } from "react";

function Course() {
  return (
    <Fragment>
      <h1>React</h1>
      <p>Learn React step by step.</p>
    </Fragment>
  );
}

This does the same basic job as:

function Course() {
  return (
    <>
      <h1>React</h1>
      <p>Learn React step by step.</p>
    </>
  );
}

The short syntax is usually preferred when you do not need to provide special Fragment properties.

Short Syntax vs Explicit Syntax

Both approaches represent a Fragment.

Short syntax

<>
  <h1>React</h1>
  <p>Learn React.</p>
</>

Explicit syntax

<Fragment>
  <h1>React</h1>
  <p>Learn React.</p>
</Fragment>

The explicit version requires:

import { Fragment } from "react";

For normal Fragment usage, the short syntax is generally cleaner.

Fragments Do Not Create DOM Elements

This is the most important concept.

Consider:

function App() {
  return (
    <div>
      <h1>React</h1>
      <p>Learning JSX.</p>
    </div>
  );
}

The DOM contains:

div
├── h1
└── p

With a Fragment:

function App() {
  return (
    <>
      <h1>React</h1>
      <p>Learning JSX.</p>
    </>
  );
}

The DOM contains:

h1
p

There is no Fragment element in the DOM.

The Fragment exists to help React group the elements.

Fragment vs `<div>`

At first, you may wonder why you should use a Fragment instead of a <div>.

Both allow you to group elements, but they have an important difference.

Fragment	`<div>`
Does not create a DOM element	Creates a DOM element
Does not add a CSS box	Creates a normal HTML element
Keeps the DOM structure cleaner	Adds another level to the DOM
Useful for grouping JSX	Useful when an actual container is needed
Cannot normally receive CSS styling	Can receive CSS styling
Cannot have a normal `className`	Can have `className`

For example:

<>
  <h2>Title</h2>
  <p>Description</p>
</>

does not create a wrapper.

But:

<div className="content">
  <h2>Title</h2>
  <p>Description</p>
</div>

creates an actual div.

When Should You Use a Fragment?

Use a Fragment when you need to group elements but do not need an actual HTML container.

For example:

function UserInfo() {
  return (
    <>
      <h2>Arafat</h2>
      <p>Frontend Developer</p>
    </>
  );
}

There is no reason for an extra div, so a Fragment is appropriate.

When Should You Use a `<div>` Instead?

Use a real HTML element when you need it to perform a purpose.

For example, if you need:

a CSS class
styling
a layout container
an HTML attribute
a semantic element
event handling
a specific DOM element

then a Fragment may not be appropriate.

For example:

<div className="course-card">
  <h2>React</h2>
  <p>Learn React.</p>
</div>

Here, the div has a purpose because the CSS class is being applied to it.

Replacing it with:

<>
  <h2>React</h2>
  <p>Learn React.</p>
</>

would remove the element that the CSS class needs.

Fragments With Components

Fragments are frequently used when a component needs to return multiple elements.

function Header() {
  return (
    <>
      <h1>Web4Learners</h1>
      <p>Learn technology step by step.</p>
    </>
  );
}

Another component can use it normally:

function App() {
  return (
    <main>
      <Header />
    </main>
  );
}

The Fragment inside Header does not create an extra DOM element.

Fragments With Lists

Fragments become particularly useful when rendering lists.

Suppose each item needs to return multiple elements.

For example:

const users = [
  {
    id: 1,
    name: "Arafat",
    role: "Developer"
  },
  {
    id: 2,
    name: "Rahul",
    role: "Designer"
  }
];

You might want to render:

<h2>Arafat</h2>
<p>Developer</p>

<h2>Rahul</h2>
<p>Designer</p>

A Fragment can group each user’s elements.

However, when a Fragment is directly inside a .map(), you need the explicit Fragment syntax so that you can provide a key.

import { Fragment } from "react";

function Users() {
  return (
    <>
      {users.map((user) => (
        <Fragment key={user.id}>
          <h2>{user.name}</h2>
          <p>{user.role}</p>
        </Fragment>
      ))}
    </>
  );
}

This is an important situation where the explicit <Fragment> syntax is necessary.

Why Can’t We Use `key` With `<>`?

The short Fragment syntax:

<>
  ...
</>

does not support attributes such as:

key

So this is not valid for assigning a key:

<>
  ...
</>

when you need to attach a key to that Fragment.

Instead, use:

<Fragment key={user.id}>
  ...
</Fragment>

with:

import { Fragment } from "react";

This is one of the main practical differences between the two Fragment syntaxes.

Fragments and Lists Example

Consider a list of courses:

const courses = [
  {
    id: 1,
    name: "React",
    duration: "8 weeks"
  },
  {
    id: 2,
    name: "JavaScript",
    duration: "6 weeks"
  }
];

You could render them like this:

import { Fragment } from "react";

function CourseList() {
  return (
    <>
      {courses.map((course) => (
        <Fragment key={course.id}>
          <h2>{course.name}</h2>
          <p>{course.duration}</p>
        </Fragment>
      ))}
    </>
  );
}

The key identifies each Fragment in the rendered list.

The DOM still does not receive an additional Fragment element.

Fragments With Tables

Fragments can be especially useful when working with tables.

A table expects specific HTML structures.

For example:

function UserRow() {
  return (
    <>
      <td>Arafat</td>
      <td>Developer</td>
      <td>Active</td>
    </>
  );
}

This allows multiple <td> elements to be returned without adding an invalid wrapper such as a <div>.

You could use the component inside a table row:

<table>
  <tbody>
    <tr>
      <UserRow />
    </tr>
  </tbody>
</table>

A <div> would not be appropriate inside the <tr> because it would create an invalid table structure.

Fragments solve this problem without introducing an extra DOM element.

Fragments With Semantic HTML

Fragments are also useful when the surrounding HTML structure already provides the correct semantic container.

For example:

function NavigationLinks() {
  return (
    <>
      <a href="/home">Home</a>
      <a href="/courses">Courses</a>
      <a href="/about">About</a>
    </>
  );
}

The component does not need to introduce an unnecessary wrapper.

If a navigation container is required, however, you might use:

<nav>
  <NavigationLinks />
</nav>

This keeps the semantic structure meaningful.

Fragments Can Be Nested

Fragments can contain other React elements and components.

<>
  <header>
    <h1>React Course</h1>
  </header>

  <>
    <p>Learn React.</p>
    <p>Build projects.</p>
  </>
</>

Although nested Fragments are possible, you should not add them unnecessarily.

Keep the structure as simple as possible.

Fragment Does Not Mean “Invisible Container”

It is useful to understand that a Fragment is not a hidden <div>.

A Fragment does not create an HTML element and therefore cannot be selected in the DOM like a normal element.

For example:

<>
  <h2>React</h2>
  <p>Learn React.</p>
</>

You cannot write CSS such as:

fragment {
  padding: 20px;
}

because there is no fragment element.

If you need a container that can be styled, use an appropriate HTML element.

Fragment and CSS

A Fragment itself cannot receive CSS.

This will not work:

<>
  <h2>React</h2>
</>

because there is no element on which to apply styling.

If you need:

padding: 20px;
background: white;
border-radius: 10px;

you need an actual element:

<div className="card">
  <h2>React</h2>
</div>

A Fragment is for grouping, not styling.

Fragments and Performance

Fragments are useful for keeping the DOM structure clean.

Instead of creating unnecessary wrapper elements:

<div>
  <div>
    <h2>React</h2>
    <p>Learn React.</p>
  </div>
</div>

you can avoid unnecessary wrappers:

<>
  <h2>React</h2>
  <p>Learn React.</p>
</>

The primary benefit is cleaner and more appropriate DOM structure.

You should not use Fragments simply because they are “faster.” Use them when an additional DOM element is not needed.

A Practical Example

Let’s create a simple course information component.

function CourseInfo() {
  return (
    <>
      <h1>React Fundamentals</h1>

      <p>
        Learn React from the basics to advanced concepts.
      </p>

      <ul>
        <li>JSX</li>
        <li>Components</li>
        <li>Props</li>
        <li>State</li>
      </ul>
    </>
  );
}

The component returns several elements:

h1
p
ul

But it does not add an unnecessary wrapper.

If you inspected the DOM, you would see:

<h1>React Fundamentals</h1>
<p>Learn React from the basics to advanced concepts.</p>
<ul>
  <li>JSX</li>
  <li>Components</li>
  <li>Props</li>
  <li>State</li>
</ul>

There is no additional <div>.

Fragment vs Parent Element

The choice between a Fragment and an HTML element depends on whether the wrapper has a purpose.

Use a Fragment

<>
  <h2>React</h2>
  <p>JavaScript library.</p>
</>

Use this when you only need to group elements.

Use an HTML element

<section className="course">
  <h2>React</h2>
  <p>JavaScript library.</p>
</section>

Use this when the container needs semantic meaning, styling, attributes, layout, or other DOM behavior.

Common Mistakes

Adding an unnecessary `<div>`

You might see code like:

function App() {
  return (
    <div>
      <h1>React</h1>
      <p>Learn React.</p>
    </div>
  );
}

If the div has no purpose, a Fragment can simplify it:

function App() {
  return (
    <>
      <h1>React</h1>
      <p>Learn React.</p>
    </>
  );
}

Trying to style a Fragment

Incorrect:

<>
  ...
</>

with the expectation that the Fragment itself can receive styles.

A Fragment does not create a DOM element.

Use:

<div className="container">
  ...
</div>

when you need styling.

Trying to Add a `className` to a Fragment

The short syntax cannot be used like this:

<>
  ...
</>

A Fragment is not a normal DOM element.

If you need a className, use a real element:

<div className="container">
  ...
</div>

Forgetting `key` When Rendering Fragment Groups

When rendering multiple Fragment groups from an array:

{users.map((user) => (
  <Fragment key={user.id}>
    <h2>{user.name}</h2>
    <p>{user.role}</p>
  </Fragment>
))}

The key belongs on the Fragment itself.

Using the Short Syntax When a Key Is Required

This:

{users.map((user) => (
  <>
    <h2>{user.name}</h2>
    <p>{user.role}</p>
  </>
))}

does not provide a key for each Fragment.

Use:

{users.map((user) => (
  <Fragment key={user.id}>
    <h2>{user.name}</h2>
    <p>{user.role}</p>
  </Fragment>
))}

Fragment Cheat Sheet

Situation	Recommended Syntax
Group multiple JSX elements	`<>...</>`
Need a Fragment with a `key`	`<Fragment key={id}>...</Fragment>`
Need CSS on the wrapper	Use an HTML element
Need `className`	Use an HTML element
Need a semantic container	Use `<section>`, `<article>`, `<nav>`, etc.
Need no extra DOM element	Use a Fragment
Fragment in `.map()` with multiple elements	Use `<Fragment key={...}>`

Practice Exercise

Create a StudentInfo component that returns:

A student name using <h2>
A course name using <p>
A list of three skills
A button

First, create the component using a <div> wrapper.

Then rewrite it using a Fragment.

Compare the resulting DOM structure.

Next, create an array:

const students = [
  {
    id: 1,
    name: "Arafat",
    course: "React"
  },
  {
    id: 2,
    name: "Rahul",
    course: "JavaScript"
  }
];

Render each student’s name and course using a Fragment with a key.

This exercise will help you understand both common Fragment patterns.

Where to Place an Image

Place this image after the section “Fragment vs <div>“.

Create a 16:9 React educational infographic comparing:

<div>
  <h2>React</h2>
  <p>Learn React.</p>
</div>

with:

<>
  <h2>React</h2>
  <p>Learn React.</p>
</>

Show visually that the <div> creates an additional DOM element while the Fragment does not.

Use a polished modern React developer aesthetic, clean JSX code, DOM tree visualization, and a dark coding-editor style.

Caption: React Fragment vs div: understanding extra DOM elements

Alt text: Comparison showing that React Fragments group elements without adding an extra DOM element

Key Takeaways

A React Fragment groups multiple JSX elements together.
Fragments do not create an additional DOM element.
The short syntax is <>...</>.
The explicit syntax is <Fragment>...</Fragment>.
The explicit Fragment requires importing Fragment from React.
The short syntax is convenient for normal Fragment usage.
Use the explicit syntax when a Fragment needs a key.
Fragments are useful when a wrapper is needed for React but not for the DOM.
A Fragment cannot be used like a normal HTML element.
You cannot normally apply className or CSS directly to a Fragment.
Use a real HTML element when the wrapper needs styling, attributes, semantics, or DOM behavior.
Fragments are particularly useful when returning multiple elements from components.
They are also useful when rendering multiple elements for each item in a list.
Fragments can help maintain a clean and meaningful DOM structure.

The main idea is simple:

<>
  <ElementOne />
  <ElementTwo />
  <ElementThree />
</>

Group the elements in React without adding an unnecessary element to the DOM.

What Is a React Fragment?

Why Do We Need Fragments?

The Short Fragment Syntax

The Explicit Fragment Syntax

Short Syntax vs Explicit Syntax

Short syntax

Explicit syntax

Fragments Do Not Create DOM Elements

Fragment vs <div>

When Should You Use a Fragment?

When Should You Use a <div> Instead?

Fragments With Components

Fragments With Lists

Why Can’t We Use key With <>?

Fragments and Lists Example

Fragments With Tables

Fragments With Semantic HTML

Fragments Can Be Nested

Fragment Does Not Mean “Invisible Container”

Fragment and CSS

Fragments and Performance

A Practical Example

Fragment vs Parent Element

Use a Fragment

Use an HTML element

Common Mistakes

Adding an unnecessary <div>

Trying to style a Fragment

Trying to Add a className to a Fragment

Forgetting key When Rendering Fragment Groups

Using the Short Syntax When a Key Is Required

Fragment Cheat Sheet

Practice Exercise

Where to Place an Image

Key Takeaways

Fragment vs `<div>`

When Should You Use a `<div>` Instead?

Why Can’t We Use `key` With `<>`?

Adding an unnecessary `<div>`

Trying to Add a `className` to a Fragment

Forgetting `key` When Rendering Fragment Groups