React Fragment VS Div

Mickaelo — Tue, 11 May 2021 08:00:37 +0000

Div tag

<div>
   Hello world
</div>

A div has the prototype chain HTMLDivElement - HTMLElement - Element - Node - EventTarget, whereas a document-fragment has DocumentFragment - Node - EventTarget. This means a div has more methods and properties available (like innerHTML).

React Fragment Tag

<React.Fragment>
   Hello world
</React.Fragment>

The fragments eliminate the wrapper div which can cause problems with invalid HTML and with styling of the components plus the fact that they are faster and the DOM is less cluttered, I’d say they are worth using.

Short syntax:

<>
   Hello world
</>

You can't add properties like key with this syntax.

React Fragment advantages

Code readability
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)

Conclusion: