Why we shouldn’t use <DIV> in React JS

As we know, we typically use DIV to make a container or wrap multiple elements inside one element and then can apply styling on them at once.

In React JSx, we commonly use div to put multiple components inside of it to return as a single component.
As you can see below:

return (
<div>
  <Home />
  <Main />
  <Blogs />
  <footer />
</div>
)

Although, we can eliminate the DIV and free up some extra space in DOM.
Here are some alternatives that we can use instead of DIV around the components.

React Js version 16.2, introduces a new feature the Fragmentation concept. Let’s look into it more deeply.

Now React Fragment works exactly the same as DIV as a wrapper around components.
See this example :

return (
<React.Fragment>
  <Home />
  <Main />
  <Blogs />
  <footer />
<React.Fragment />
)

OR we can use the Fragment shothand tag (< > < />) snippet instead of <React.Fragment>

this is exactly the same as <React.Fragment>

return (
<>
  <Home />
  <Main />
  <Blogs />
  <footer />
< />
)

Benefits of Using Fragment:

1. FAST
As we know DIV tag creates a node in DOM and occupies some space in DOM, but the fragment does not create a node in DOM, so it will not take any space.
which makes the application bit…