Why are Fragments in React 16 better than container divs?

Question

In React 16.2, improved support for Fragments has been added. More information can be found on React\'s blog post here.

We are all familiar with the fol

Answer 1

Adding to all answers above there is one more advantage: code readability, Fragment component supports a syntactic sugar form, <>. Thus the code in your question can be written more easily as:

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

According to docs,

In React, this desugars to a <React.Fragment/> element, as in the example from the previous section. (Non-React frameworks that use JSX may compile to something different.)

Clutter-free, right ?

Note that you still need to use <Fragment> syntax if you need to provide key to the fragment.

Answer 2

1. Using <React.Fragment>...</React.Fragment>, we can add a parent tag to our JSX elements without adding an extra node to the DOM.
2. you can replace the extra div tags with React.Fragment
3. writing React.Fragment every time is too long for you. React.Fragment has a shorthand syntax that you can use. It is <>...</>.

Answer 3

• Added features not possible before with JSX
• Better semantic jsx markup. Wrapper elements are used when needed not because they are forced to.
• Less overall dom markup (increased render performance and less memory overhead)

It as simple as when you don't need a wrapper element you aren't forced to use one. Having less elements is great but I think the biggest benefit is being able to render elements in jsx that weren't previously possible and adding better semantic meaning to wrapper elements because they are optional now.

This wasn't possible before:

 <select>
    {this.renderOptions()}
 </select>

Glancing at the following in React 15 you can't tell if the wrapper element is needed or not:

<span>
  <h1>Hello</h1>
  {this.getContent()}
</span>

Answer 4

I prefer to use the shorthand version of React.Fragment

<>
   <p>....</p>
   <div>....</div>
</>

is same as

<React.Fragment>
   <p>....</p>
   <div>....</div>
</React.Fragment>

Answer 5

As per the reactjs.org docs most important needs of <Fragment> </Fragment> instead of div's are to avoid breaking HTML semantics. When we use div's instead of <Fragment> </Fragment> we break the HTML semantics.

To know more about html semantics. please click and also there are cases where if you use div's instead of Fragments it will be invalid html, for example look at this code:

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

<table>
      <tr>
        <div>
          <td>Hello</td>
          <td>World</td>
        </div>
      </tr>
 </table>

Fragments solve this problem.

Answer 6

1. It’s a tiny bit faster and has less memory usage (no need to create an extra DOM node). This only has a real benefit on very large and/or deep trees, but application performance often suffers from death by a thousand cuts. This is one cut less.
2. Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle makes it hard to keep the desired layout while extracting logical components.
3. The DOM inspector is less cluttered. :-)

You can find the descriptions of some other use cases in this React issue: Add fragment API to allow returning multiple components from render