Introduction
Hey Guys 👋, hope you're having a great weekend. Today, I'm going to speak about the pros and cons of and <>. I'll also compare them and give you my opinion on what should be used.
What is a Fragment
In jsx, we are not allowed to return more than 1 child element. For example -
Allowed -
function myDemo() {
return <p>Demo</p>
}
Not allowed
function myDemo() {
return (
<p>Demo</p>
<p>Bad code</p>
)
}
So, what used to happen was that developers used to put in a div surrounding the adjacent elements -
function myDemo() {
return (
<div>
<p>Demo</p>
<p>Bad code</p>
</div>
)
}
This approach of adding a div added an extra element into the DOM and sometime messed up the styling. So, there was a feature in react called React.Fragment
. It was used like this -
function myDemo() {
return (
<React.Fragment>
<p>Demo</p>
<p>Bad code</p>
</React.Fragment>
)
}
React.Fragment
acted as a parent element for the adjacent JSX elements however it was not added into the DOM.
In react 16.2, <></>
was introduced.<></>
is basically an empty JSX element that does the same functionality
The Comparison
According to me, React.Fragment
is much clearer and it's obvious that it acts as a fragment. On the other hand, <></>
may seem like a bug to beginners who are not aware of React.Fragment
That's all for now, hope you guys liked the post. Share your views in the comments.