How to Use React Fragments and Why You Should

How to use React fragments and why you should!

React and React Native use a simple idea of view on top of view, and this is why React fragments are very important.

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, adding any nesting level on your HTML means an additional amount of time (minimal before your eyes) is going to be taken to render the nested UI.

Why avoid additional nesting

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 your 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?

You are still here!

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!

Well, with that said, it would be enough to say that this topic is closed, however, not yet, there are some things you need to know, when working with React fragments or React native fragments, depending on what you are building.

How to use React fragments

Let us look at this piece of code:

function aLetterToParentDiv() {
    return (
        <div>
            <div>Div, You are awesome</div>
            <div>Always remember that!</div>
        </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 (
        <>
            <span>ShorterParentFragment, You are awesome</span>
            <span>But additional support is needed!</span>
        <>
    )
}

then there is the longer method:

function aLetterToLongerParentFragment(itemId) {
    return (
        <React.Fragment>
            <span>ShorterParentFragment, You are awesome</span>
            <span>But additional support is needed!</span> 
        </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!

Key takeaway!

Well, that concludes this short coverage of React fragments, and should also apply to React native fragments.

So always remember:

• Div(and similar ways of enclosing adjacent elements) add additional and unnecessary nodes to the DOM tree. Which will be an expensive undertaking in React native.
• React fragments are a better way to enclose adjacent JSX elements.
• The longer approach is better than the shorter approach because it has support for the keys property.

Conclusion

Well, that is it for this piece.

Until the next one!

Happy coding!

Are you interested in learning React? Checkout similar awesome articles here: Related Articles

More content at plainenglish.io