React Fragment: Grouping Elements Without Extra DOM Nodes

<Fragment> is a component provided by React that allows grouping multiple child elements without adding extra node to DOM.

It doesn't render in HTML but allows returning multiple elements from component.

Why Fragment?

In React every component must return one root element. Previously, JSX had to be wrapped in <div>, which cluttered DOM:

// Bad example
return (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

With fragment:

// Good example
return (
  <Fragment>
    <h1>Title</h1>
    <p>Description</p>
  </Fragment>
);

*Or even shorter:

// Short syntax
return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

Comparison: div vs Fragment