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>.
Continue reading React Fragments: What Every React Developer Should Know on SitePoint.
