React Fragments in v16.2.0

With the release of react 16.2.0, many new updated features were introduced but Fragments seem to one of them who have gained much attention.

So, what’s so special about fragments & what is the reason behind their immense popularity. Let’s see….

What are Fragments ?

Fragments are just like empty jsx tags. They facilitate to group a list of children without adding extra nodes to the DOM.

Here’s a simple example to help you better understand the concept:-

Hello BlueEast
<h2>MEVRIS Platform</h2>
Making home automation easier and comfortable.
<h2>Some other text</h2>
Even more text.

Before the release of React 16, the only way to group child components was by wrapping the children in a div or span.

render() {
  return (
    // Extraneous div element :(
    <div>
      Hello BlueEast
      <h2>MEVRIS Platform</h2>
      Making home automation easier and comfortable.
      <h2>Some other text</h2>
      Even more text.
    </div>
  );
}

To avoid this approach, React 16 allowed to return an array of components from return of render method like the following:-

render() {
 return [
  "Hello BlueEast",
   <h2>MEVRIS Platform</h2>,
   "Making home automation easier and comfortable.",
   <h2>Some other text</h2>,
   "Even more text."
 ];
}

The above approach introduced some new coding styles that were not much aligned with jsx. For instance:-

  • Each component should be separated by comma.
  • Strings must be wrapped in quotes.
  • All children must have a key prop to avoid React’s Key Warning.

React now provides a Fragment component to replace this array. This Fragment component makes jsx syntax more consistent. You can use <Fragment /> the same way you’d use any other element without changing the way you write JSX. No commas, no keys, no quotes.

const Fragment = React.Fragment;

<Fragment>
<ChildA />
<ChildB />
<ChildC />
</Fragment>

// This also works
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>

JSX Fragment Syntax

For developers, to make the experience more convenient syntactical support for fragments to JSX has been added:

render() {
  return (
    <>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </>
  );
}

In React, this computes to a <React.Fragment/> element, as in the example from the previous section.

NOTE: Non-React frameworks that use JSX may compile to something different.

Voila !! It wont add any actual element to the DOM

Support for ‘Keyed Fragments’

Empty JSX tags <></> syntax does not accept attributes, including keys.

If you need to provide keys, you can use <Fragment /> directly. A use case for this would be mapping a collection to an array of fragments — for example, to create a description list:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

key is the only attribute that can be passed to Fragment.