React fragment

React:

React is an efficient Javascript library for building user interfaces (UI) in a web application, it gives room for you to make up a composite UI by combining minimal pieces of code called “components”. In React JSX gives room to re-write HTML elements directly within Javascript code.

However, returning more than one element in React components is a problem posing in using React unless all are wrapped up in a new parent node like <div> which creates extra nodes to the DOM which will expand the HTML DOM.

Let’s take a look at this:

 function Parent (){
  return (
  <p>Hello world!</p>
  <p>Hello React!</p>
  );
}

React components can only render one element, and if you have more than one element, then the common practice is to wrap them in a single root element, usually a <div> wrapper.
Like this:

 function Parent() {
  return (
    <div>
      <p>Hello</p>
      <p>How are you</p>
    </div>
  );
}

When DOM is large it consumes memory, causing the page to load slowly in the browser, in some cases debugging and tracing the origin of extra nodes becomes very uneasy, the user’s browser consumes additional power to process your website and many more disadvantages. So to avoid all of these overwhelming disadvantages React Fragment saved us from that hell.

React fragment:

React fragment is a feature in React introduced in React V16.2.0. This feature in React gives room to write more than one element in React components without adding an extra node to the DOM.

Recommendations:

It is recommended that you should be familiar with basic background knowledge about HTML and React before reading the article.

React components with div:

Before we see how to use React fragment let’s walk through some examples in React without using the React fragment.

For example, you have this React component:

function TableColumnData() {
  return (
    <div>
      <td> Hello fragment </td>
      <td> I am learning </td>
    </div>
  );
}

_

 function Table() {
  return (
    <table>
      <tr>
        <TableColumnData />
      </tr>
    </table>
  );
}

If we re-write in HTML we get this:

 <table>
  <tr>
    <div>
      <td> Hello fragment </td>
      <td> I am learning </td>
    </div>
  </tr>
</table>;

As we’ve wrapped up the <td> elements in <div>, we have introduced an element in the middle of <tr> and <td> elements and this breaks the parent-child relationship. For things to work as expected an element (the div for example) that can break the parent-child relationship should not be introduced and that’s the role of the React fragment.

How to Use React fragment:

Syntax

function Parent() {
  return (
    <React.Fragment>
      <Child1 />
      <Child2 />
    </React.Fragment>
  );
}

However, we can get rid of adding React to the angle bracket by importing Fragment from React.

import React, { Fragment } from 'react'

function Parent() {
  return (
    <Fragment>
      <Child1 />
      <Child2 />
    </Fragment>
  );
}

React Fragment shorthand:

React Fragment allows us to group a list of elements without wrapping them in a new node.
<> Is the shorthand tag for React fragment.

So we can take this for example:

Parent() {
  return (
     <>
        <Child1 />
        <Child2 />
     </>
  );
}

Providing solution extra DOM using React fragment:
In this section, we will be using React fragment to solve the problem we have in React without a <div>.

function TableColumnData() {
  return (
    <React.fragment>
      <td> Hello fragment </td>
      <td> I am learning </td>
    </React.fragment>
  );
}

_

function Table() {
  return (
    <table>
      <tr>
        <TableColumnData />
      </tr>
    </table>
  );
}

In this code snippet, we remove the <div> element from the previous example, we replace React fragment and it sorts out the break in the parent-child relationship, and things work as expected in the Table.

Conclusion

Throughout this tutorial, there was a brief introduction to React and JSX and the usual way of returning multiple elements in React components by wrapping them up in a <div>. We move further to React fragment and its practical application.

Thanks for reading this article. I hope this helps..🚀