title: Why are Fragments in React 16 better than container divs?
body: <p>In React 16.2, improved support for <code>Fragments</code> has been added. More information can be found on React's blog post <a href="https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html" rel="noreferrer">here.</a></p>
  
  <p>We are all familiar with the following code:</p>
  
  <pre><code>render() {
    return (
      // Extraneous div element :(
      &lt;div&gt;
        Some text.
        &lt;h2&gt;A heading&lt;/h2&gt;
        More text.
        &lt;h2&gt;Another heading&lt;/h2&gt;
        Even more text.
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Yes, we need a container div, but it's not that big of a deal.</p>
  
  <p>In React 16.2, we can do this to avoid the surrounding container div:</p>
  
  <pre><code>render() {
    return (
      &lt;Fragment&gt;
        Some text.
        &lt;h2&gt;A heading&lt;/h2&gt;
        More text.
        &lt;h2&gt;Another heading&lt;/h2&gt;
        Even more text.
      &lt;/Fragment&gt;
    );
  }
  </code></pre>
  
  <p>In either case, we still need need a container element surround the inner elements. </p>
  
  <p>My question is, why is using a <code>Fragment</code> preferable? Does it help with performance? If so, why? Would love some insight.</p>