Menu
|

React Fragments: A Simple Syntax to Improve Performance

React Fragments: A Simple Syntax to Improve Performance

React Fragments: A Simple Syntax to Improve Performance – SitePoint

Skip to main content

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 ( <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 ( <> <td>Hello</td> <td>World</td> </> );
}

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.

0 Comments Leave a reply

    Leave a comment

    Your comment(click button to send)

    JADA
    Share

    This is a unique website which will require a more modern browser to work!

    Please upgrade today!

    Open chat