Building fragments of JSX

React 16 introduced the concept of JSX fragments. Fragments are a way to group together chunks of markup without having to add unnecessary structure to your page. For example, a common approach is to have a React component return content wrapped in a <div> element. This element serves no real purpose and adds clutter to the DOM.

Let's look at an example. Here are two versions of a component. One uses a wrapper element, and one uses the new fragment feature:

import * as React from "react";
import * as ReactDOM from "react-dom";
 
import WithoutFragments from "./WithoutFragments";
import WithFragments from "./WithFragments";
 
const root = 
  ReactDOM.createRoot(document.getElementById("root"));
 
root.render(
  <div>
    <WithoutFragments />
    <WithFragments />
  </div>
);

The two elements rendered...