Why are Fragments in React 16 better than containers?

Question

React 16.2 adds improved support for Fragments . More information can be found on the React blog here.

We are all familiar with the following code:

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

Yes, we need a div container, but that is not that important.

In React 16.2, we can do this to avoid the surrounding div container:

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

In any case, we still need the container element to surround the inner elements.

My question is: why use Fragment preferable? Does this help in performance? If so, why? I would like to see a little.

Answer 1

• It is slightly faster and has less memory (there is no need to create an additional DOM node). This provides real benefits only on very large and / or deep trees, but application performance often suffers from death by thousands of cuts. This reduction is less.
• Some CSS mechanisms, such as Flexbox and CSS Grid, have a special relationship between parents and children, and adding a div in the middle makes it difficult to maintain the desired layout when extracting logical components.
• The DOM inspector is less cluttered. :-)

In this React issue, you can find descriptions of some other use cases: https://github.com/facebook/react/issues/2127

Answer 2

Adding to all the answers above gives another advantage: the readability of the code , the Fragment component supports the 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 the docs ,

In React, this happens with <React.Fragment/> , as in the example from the previous section. (Non-React frameworks using JSX can compile into something else.)

No interference, right?

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

Answer 3

• Added features previously inaccessible with JSX
• Improved jsx semantic markup. Wrapper elements are used when necessary, not because they are forced.
• Smaller overall dom markup (increased rendering performance and less memory overhead)

It is as simple as when you do not need a shell element, you should not use it. Considering fewer elements, but I think the biggest advantage is that they can display elements in jsx that were not previously possible, and add a better semantic value for shell elements, because now they are optional.

This was not possible before:

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

Looking at the following in React 15, you cannot determine if a wrapper element is needed or not:

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

Answer 4

According to reatjs.org docs, the most important needs of <Fragments> <Fragments/> instead of div are to prevent HTML semantics from being violated. When we use a div instead of <Fragments> <Fragments/> we break the semantics of HTML. Learn more about HTML semantics. please click, and in some cases, if you use a div instead of Fragments, this 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> ); } } Result in table output of Columns Component <table> <tr> <div> <td>Hello</td> <td>World</td> </div> </tr> </table> 

Fragments solve this problem.