Do not use <div> in React😎😯👩‍💻

Howdy People,😍🙋‍♀️
I'm on this fantastic journey where I'm exploring new & fun concepts of React.
This concept of Fragments sounds like the perfect
SHORTCUT ever 🤣😂

We all use <div> everytime when we work in html to make containers or wrap elements inside one element.🥱😴

In React JSX,
To return multiple components or elements we have to wrap & group all the elements inside a wrapper like div.

But in most of the cases that div is not required at all & it takes an extra space in the DOM but still we have to use it because that's how React works.
So, react introduced a new feature in React 16.2 which are React Fragments 🤑🤑🤑

Now React Fragments works exactly like Div, you can wrap or group multiple elements with Fragments.

return(
    <React.Fragment>
        <MyComponent1 />
        <MyComponent2 />
        <MyComponent3 />
    </React.Fragment>
)

Also you can use Fragments shorthand (<> </>) instead of React.Fragment,
example :

return(
    <>
        <MyComponent1 />
        <MyComponent2 />
        <MyComponent3 />
    </>
)

But why to use Fragments?? 🤔🤔🤔

Fast
Div element creates a node in DOM & occupy some space, but Fragments doesn't do any of this.

Less cluttered DOM
Having many nested div makes the DOM large & hard to read or debug but with Fragments, DOM becomes a little easy to look at and debug.

Okay Bye, Hope you liked this shortcut of mine!!
Feel free to add comments & hit likes.
🫡👌⭐💛👍