Understanding React fragments

React fragments are an essential but elegant feature made available in React v16.2.0. Simply understanding their existence will help you create better React components and save time while designing layouts.

Related posts

Top insider tricks to work with App Keywords in the Autodesk

It is the Must-Know Basics of Mobile Game Design

What is a React fragment?

Fragments are a syntax that allows us to add more elements to the React component and not wrap them in an additional DOM node.

It is a straightforward React component. If we only return one JSX within an element, we can avoid wrapping the JSX within a wrapper element, as we have seen in the previous.

Although this is fine, it could cause issues with our components.

React fragment in contrast

There's nothing wrong with div containers as long as they're used for creating styles for the JSX. But, they're not required to be wrapped around our JSX. They turn into additional nodes that clog in the DOM tree when you do it.

When working with nested elements, these wrappers could cause a problem within the source code. For example, the div could create a layout that will be broken when working with CSS Flexbox and Grid. There is also the possibility of incorrect HTML in the case of elements that have to be arranged in a particular way, for example, table>tr>td.

In the meantime, it is time to explore the issues we face in the real world and then see what the React Fragment solves them. We will begin with the CSS layout; we will use Flexbox.

The use of div wrappers in CSS layout

Each row renders a separate divided div that encloses content aligned in a single row and a Column, the information in a vertical manner.

Let's change the code above to split the first two columns into a third component named ChildComponent.

The result you expect to get will be the same as before, but it's not. The separation of the first two columns into the ChildComponent component as a separate element ChildComponent causes a layout change:

The ChildCompoent contains a div that wraps its JSX elements to keep them all together. But, the additional element causes a break in the layout since the browser believes it's an element of the design.

Your browser is unaware that you've created the div so that you don't run into an error, and it is used as an extension of your HTML.

When the component tree is nestled deeper, it isn't easy to trace where the additional nodes get their information. In the same way, if we're using CSS grids to design and style our layouts, divs that are not needed could cause the form to be broken.

Why do we need the fragments we use in React?

React fragments provide an alternative to unnecessary divs inside our programs. These fragments don't produce any additional elements within the DOM. This means that any children's components will display without covering the DOM node.

React fragments allow us to combine multiple sibling components without adding any extra marking in the HTML rendered.

React is a tool for creating and rendering fragments

There are a variety of ways to render and create fragments. It is possible to develop a portion using the Fragment property of a React object you import. React thing as demonstrated in the previous example. The element can be imported of React to use it as a React component and then use it the same way:

You can also create React fragments on the fly. React piece by hand using the shorthand syntax. It allows you to wrap components using an unformatted HTML element with syntax similar to>. 

Utilizing the above three options brings back the original layout since it eliminates the unnecessary div within the DOM.

Lists rendered in a DIV wrapper

Let's examine another application for fragments. For instance, let's say you wish to display the list of items displayed within the web page. The list can be static, derived by an existing locally-generated JSON file, or pulled via an API.

Each element is rendered within the parent div, which is of no importance as wrapping. Because there isn't any styling or data associated with the enclosed div, it is safe to replace it with a React fragment.

Rendering lists using React fragments

This is a simple application where you may be rendering an additional div in your DOM. The more extensive list of items you have, the more significant the impact.

As your application grows in size and complexity in structure, you may encounter rendering a substantial number of unnecessary divs to render multiple lists in your application. This could cause bloating of your HTML rendering, which can cause problems with performance when using an older technology.

It's not essential; however, making unnecessary HTML elements is unwise. If you're using an unspecific list component in your application, think about using fragments to wrappers so that you prevent abstracting away from pure code and the semantics.

Conclusion

Fragments let you create cleaner, more understandable, and manageable code that is easy to read and maintain. They're not a substitute for divs within your HTML. However, they provide an improved method of creating and rendering markup when the divs you're using are unnecessary within your code.

You can prevent issues that cause layouts to break or even optimize the time it takes to render your markup with fragments. But, it is best only to use them when you need to. If you require an alternative wrapper for your JSX to create styling, choose a div over.

Related posts

Apple Watch Series 7 review: Bigger screen and faster charging; however, it's the best-performing

5 Tips breakthroughs to increase iOS app installs on App Store

Hope this article is helpful to you, thanks for reading.

Source: https://proreviewsapp.com/