React Fragments: A Simple Syntax to Improve Performance

Share this article

React Fragments: What Every React Developer Should Know

React Fragments were introduced in November 2017 with React 16.2.0. Although they’ve been around for a while, many React developers avoid using them or employ them without knowing what they are. React Fragments are an entry-level but key feature, and every React developer should master them, regardless of their skill level. Also, considering how long they’ve been part of React, they can no longer be ignored.

So, let’s see everything you need to master React Fragments, by diving into the Why, the What, the How, and the When.

Why React Fragments Exist

As stated in the official React documentation, returning more than one HTML element is a commonly desired behavior for React components. To achieve this, you must wrap all these elements with an HTML tag. This is because React requires that components return only one HTML element. The easiest solution would be to use a wrapper <div>. From a logical point of view, this extra <div> can usually be considered irrelevant, but it does have consequences. First, by using this approach consistently, you’re making your DOM more nested, and consequently slower to be rendered. Second, such an approach can lead to invalid HTML, as you’re going to see.

For example, let’s say you have a Table component which renders an HTML table, whose columns are rendered with another component called Columns. Here’s the code you might use for this:

function Table() {
  return (
    <table>
      <tr>
        <Columns />
      </tr>
    </table>
  );
}

function Columns() {
  return (
    // the wrapper div used to return two <td> tags
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  );
}

This would result in the following HTML to be rendered, which is invalid, because a <div> can’t appear as a child of <tr>.

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

React Fragments were introduced precisely to solve this problem.

What React Fragments Are

React Fragments involve a special syntax that lets you group a list of HTML elements without adding extra nodes to the DOM. In other words, React Fragments enable you to group multiple child components without introducing any unnecessary markup in the rendered HTML, offering a solution to the problem addressed before, and many others.

How To Use Them

You can use React Fragments by wrapping your child elements to be returned by your component with a <React.Fragments> tag. Returning to the example above, the Columns component would be written as follows:

function Columns() {
  return (
    <React.Fragment>
      <td>Hello</td>
      <td>World</td>
    </React.Fragment>
  );
}

This would cause the Table component to be translated into the following HTML:

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

As you can see, there’s no wrapping tag in the rendered HTML. Unlike what happened before, this won’t result in invalid HTML.

React Fragments can also be employed with a short syntax, which looks like an empty tag:

function Columns() {
  return (
    // using <> is just like using <React.Fragment>
    <>
      <td>Hello</td>
      <td>World</td>
    </>
    // using </> is just like using </React.Fragment>
  );
}

This leads to the same result as the example above. So, keep in mind that the empty tag is a shorthand for <React.Fragment>.

When To Use Them

Basically, you should use React Fragments any time you would otherwise introduce an unnecessary wrapper <div> to make your component return more than one HTML element. So, don’t think of Rect Fragments as a replacement for the <div>s in your HTML. On the contrary, see them as a way to avoid unnecessary tags and to get a better markup structure as a result.

There are three use cases where React Fragments are commonly used. Let’s see them all.

1. Wrapping multiple HTML elements

As you might have guessed, wrapping multiple HTML elements is the most common use case of React Fragments. Whenever you have to define a React component that needs to return multiple HTML elements, you should wrap them with the <React.Fragment> or <> tag. As seen before, this is the recommended approach, since using any other wrapper tag can lead to invalid HTML.

Let’s see them in action while defining a component returning four HTML elements.

See the Pen React Fragments Example 1 by SitePoint (@SitePoint) on CodePen.

2. Keyed Fragments

As stated in the React documentation, Fragments declared with the explicit <React.Fragment> syntax may have keys, and this is useful when dealing with any JavaScript collection. Please note that this is not the case while using the short syntax.

For example, let’s say you have an array of objects where each element represents an author. Your goal is to render all authors using the data in this array. This can be achieved by mapping each array element to a corresponding HTML element, which is required by React to have a unique key. Since React Fragments support the key props, you can harness them to achieve so without introducing any extra markup. Let’s see this with a live example:

See the Pen React Fragments Example 2 by SitePoint (@SitePoint) on CodePen.

3. Conditional rendering

When it comes to conditional rendering, React requires you to return a single element in both branches. This is where React Fragments can come into play, allowing you to more easily render groups of elements and avoid adding unnecessary extra tags, just like in the following example:

See the Pen React Fragments Example 3 by SitePoint (@SitePoint) on CodePen.

Conclusion

In this article, we looked at React Fragments, and why they’re an unavoidable feature every React developer should master. Fragments allow you to design a better DOM structure, avoiding inserting unnecessary <div>s. Also, a cleaner markup structure means shorter rendering time, which is a great side effect. Plus, React Fragments, in both of their possible syntaxes, allow you to write cleaner, maintainable, and readable code accordingly.

Thanks for reading! I hope that you found this article helpful. Feel free to reach out to me with any questions, comments, or suggestions.

Frequently Asked Questions about React Fragments

What are the key benefits of using React Fragments?

React Fragments offer several benefits. Firstly, they help in grouping a list of children without adding extra nodes to the DOM. This is particularly useful when you want to return multiple elements from a component’s render method. Secondly, they make your code cleaner and easier to read, as you don’t need to use unnecessary div tags. Lastly, using Fragments can improve performance, especially in large and complex applications, as it reduces the number of DOM nodes that need to be created and updated.

Can I pass props to React Fragments?

No, you cannot pass props to React Fragments. Fragments are designed to be a lightweight syntax that doesn’t accept any keys or props. If you need to pass props, you should use a regular React component instead.

How do I use React Fragments in my code?

You can use React Fragments in two ways. The first way is to use the <React.Fragment> syntax. The second way is to use the shorthand syntax, which is just <>. However, note that the shorthand syntax doesn’t support keys or attributes.

What is the difference between using a div and a Fragment in React?

The main difference between using a div and a Fragment in React is that a div adds an extra node to the DOM, while a Fragment does not. This can have performance implications, especially in large applications. Additionally, using a div can sometimes mess up the CSS styling, while a Fragment does not have this issue.

Can I use React Fragments with React versions older than 16.2?

No, you cannot use React Fragments with React versions older than 16.2. Fragments were introduced in React 16.2. If you’re using an older version of React, you’ll need to update to a newer version to use Fragments.

How do I use keys with React Fragments?

To use keys with React Fragments, you need to use the <React.Fragment> syntax and pass the key prop, just like you would with any other React element. The shorthand syntax (i.e., <>) does not support keys.

Can I use React Fragments inside JSX expressions?

Yes, you can use React Fragments inside JSX expressions. In fact, this is one of the main use cases for Fragments. They allow you to return multiple elements from a JSX expression without having to wrap them in an unnecessary div.

Are there any limitations or downsides to using React Fragments?

One limitation of React Fragments is that you cannot pass props to them. Additionally, the shorthand syntax for Fragments does not support keys or attributes. However, these limitations are by design, as Fragments are meant to be a lightweight syntax for grouping children without adding extra nodes to the DOM.

Can I use React Fragments with React Native?

Yes, you can use React Fragments with React Native. However, note that React Native has its own set of components, and not all HTML elements are available. Therefore, the use cases for Fragments in React Native might be slightly different than in a regular React application.

How do React Fragments affect the React component lifecycle?

React Fragments do not affect the React component lifecycle in any way. They are just a syntax for grouping children, and they do not have their own lifecycle methods. All lifecycle methods are still handled by the parent component.

Antonello ZaniniAntonello Zanini
View Author

I'm a software engineer, but I prefer to call myself a Technology Bishop. Spreading knowledge through writing is my mission.

ReactReact Fragments
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week