React Fragments Explained: How to Group Elements Without Extra DOM Nodes

#webdev #javascript #beginners #react

In this blog, we will be discussing what React Fragments are. We also discuss the issues that developers face without React Fragments. Then we will see how React Fragments solve our problem. And how React Fragments help us write cleaner and more efficient code.

What are React Fragments?

React Fragments allow the developers to group multiple elements without the need for an extra parent element as a wrapper. We’ll see what it means in the next sections. They were introduced to solve the problem of unnecessary wrapper elements.

What Problems do React Fragments Solve?

For better understanding of what React Fragments solve, first you should know that a return statement in JSX (a React Component) can only return a single parent element. This means that if more than one element is returned, React will throw an error.

For example, if I return two elements as shown in the screenshot below, there occurs an error.

The error says JSX expressions must have one parent element.

How to Fix?

One way to fix this error is by using a wrapper element that wraps the actual elements to be used. For example, you can use <div></div> to wrap the code to make the single parent element returned by the function (component). Like this:

This will work fine. Your code will run without an error. But, this solution creates another problem explained in the next section.

What Problems Occur When Using `<div>` as a Wrapper?

If you look at the code, we are using an extra <div></div> which has no use. This div has no purpose. You can say that this div solves our problem. It is true that it solves our problem But this solution comes with its own costs. It is fine to use if you are using 2-3 components. But in real world application, there are a lot of components. And for each component, if we add an extra div, then we are making the whole DOM complicated. This leads to a cluttered DOM, makes debugging harder, and can cause layout and styling issues—especially in large applications. So, this approach makes our app slow which is not intended in real world applications. So, the question arises, how to solve this?

How React Fragments Solve This?

Now, you have understood what problems the developers are facing. So, to tackle this issue, the concept of React Fragments was introduced. React Fragments allow developers to wrap multiple JSX elements without adding an extra DOM element. So, using React Fragments prevent the use of extra useless elements which are absolutely unnecessary for the application.

Let’s look how exactly React Fragments solve this. To solve this, wrap the component elements within: <React.Fragment></React.Fragment>. For example, I replaced the div with React.Fragment in the above code. Here’s the final code:

import React from "react";
function App() {
  return (
    <React.Fragment>
      <h1>Hello World</h1>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore atque
        itaque eius quia provident tempora sapiente rerum, consequuntur veniam
        sit corporis, amet quae illo repellendus vitae! Libero dolores
        laudantium impedit.
      </p>
    </React.Fragment>
  );
}

export default App;

Note: In older React versions or setups without the new JSX transform, you need to import React to use React.Fragment. In modern React projects (React 17+), this import is often not required. You can import React using this line:

import React from "react";

This will solve our problem without adding any unnecessary element.

Short Syntax:

There’s a short syntax available in React for using React Fragments. This shorter syntax does not require importing React. It can be used without importing React. The shorter syntax is just omitting the words React.Fragment from the wrapper <React.Fragment></React.Fragment. By using shorter syntax, you can use wrap the component in <></>. Here’s the example how to do this:

function App() {
  return (
    <>
      <h1>Hello World</h1>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore atque
        itaque eius quia provident tempora sapiente rerum, consequuntur veniam
        sit corporis, amet quae illo repellendus vitae! Libero dolores
        laudantium impedit.
      </p>
    </>
  );
}

export default App;

Note: I have not imported React while using shorter syntax.

I have tried to cover React Fragments and how to use them in a beginner friendly way by not getting deep into it to avoid confusing beginners. If you want a dedicated detailed blog on React Fragments, Fragments VS div, and advanced explanation, please comment below. I’ll bring the detailed explanation soon.