Well, before we go any further, you may have been faced with the infamous (yes, infamous) error warning – Adjacent JSX elements must be wrapped in an enclosing tag. Well, this is where react fragments come in handy.
But why do you get this error and how can react fragments help you solve the issue in an efficient manner? Well, react render method expects a single node element to be returned.
Well, you may have had the brilliant idea to simply wrap all of your adjacent JSX elements in a div, or another wrapper and return these, but was it really the best option to go with? Well, honestly no. BUT it works, you may argue, well, it works, BUT it can be better.
So, why is it not a good idea to simply wrap any adjacent JSX elements in a div or similar HTML element? Well, they add additional overhead to the UI. Yes, by adding any nesting level on your HTML,that means an additional time(minimal before your eyes) is going to be taken to render the nested UI.
To see how this unintentional nesting can be a problem, well, let’s talk about react native fragments a bit. If you have worked on android, you may have seen that nesting is highly discouraged, because it slows down the overall time taken to render the UI. Thus, android advocates for flat UI hierarchy as opposed to a highly nested hierarchy.
And generally, as a rule of thumb, it is best to have as little nesting as possible in the DOM tree.
Now, let’s get back to react native components. When your react native application is built, your components, whether core or native will be transformed into the target platform of choice (in our case, we use android for this example).
Now, we get back to those additional divs which you innocently, out of the goodness of you heart, added, in an attempt to fix that error we mentioned earlier.
When divs are transformed into android native views, they are analogous to what ViewGroups are. So, by now you see where this is headed. You will have a working but UI expensive code with you. All those divs, will be transformed to ViewGroups! So, how to fix this you ask?
Well, so, how to fix the nesting issue? Well, enter react fragments! React fragments are UI wrappers, which make it possible to enclose adjacent JSX elements, just as you would with divs, but with the additional benefit of no added nodes to the UI!
Let us look at this piece of code:
function aLetterToParentDiv() {
return (
<div>
<p>Div, You are awesome</p>
<p>Always remember that!</p>
</div>
)
}
Well, it is an appreciation of what parentDiv has been doing for your code all these years you have worked with it.
However, with react fragments we have two ways of achieving this.
The first approach is the react fragments shorter approach where we have:
function aLetterToShorterParentFragment() {
return (
<>
<p>ShorterParentFragment, You are awesome</p>
<p>But additional support is needed!</p>
</>
)
}
then there is the longer method:
function aLetterToLongerParentFragment(itemId) {
return (
<React.Fragment key={itemId}>
<p>React.Fragment, You are awesome</p>
<p>And the additional support looks promising!</p>
</React.Fragment>
)
}
Well, the shorter approach and longer approach basically serve the same purpose of eliminating divs, BUT the longer approach, React.Fragment is better since it has support for keys property which is primarily one of the most important react and react native components attributes!
Well, that concludes this short coverage of react fragments, and should also apply to react native fragments.
So always remember:
Well, that is it for this piece.
Until the next one!