DEV Community

Cover image for React JS Fragments
Vishnu Satheesh
Vishnu Satheesh

Posted on

React JS Fragments

In the realm of React development, simplicity often translates to efficiency. Enter React Fragments - a lightweight yet powerful feature that streamlines the way we structure components.
In this article, we'll explore how React Fragments provide a straightforward solution for organizing elements without unnecessary wrapper divs, enhancing code readability and maintainability.
Let's embark on a journey to uncover the simplicity and versatility of React Fragments.

React Fragment is a feature that allows to group multiple elements without adding extra DOM wrappers. Useful to return multiple elements from a component's render method without extra containers.

With React 16.2 and above Fragments you can use a fragment to avoid adding the extra wrapper, Fragments are denoted by the special syntax:

<React.Fragment> or
<> and </> the shorthand

Without Fragments

Prior to React 16.2, you had to wrap them in a single parent element.
For example :



import React from "react";

const MyComponent = () => {
return (
<div>
<h1>Hello</h1>
<p>World!</p>
</div>
);
};

export default MyComponent;

Enter fullscreen mode Exit fullscreen mode




With Fragments (Shorthand)

A Fragment is simply an empty element that acts as a container for other elements without rendering any additional DOM nodes.



import React from 'react';

const MyComponent = () => {
return (
<>
<h1>Hello</h1>
<p>World!</p>
</>
);
};

export default MyComponent;

Enter fullscreen mode Exit fullscreen mode




With Fragments (Key Prop)

Fragments can also have a Key prop, just like any other React element. The key prop is useful when you're dynamically rendering lists of fragments with <React.Fragment>



import React from 'react';

const MyListComponent = ({ items }) => {
return (
<>
{items.map((item) => (
<React.Fragment key={item.id}>
<span>{item.name}</span>
</React.Fragment>
))}
</>
);
};

export default MyComponent;

Enter fullscreen mode Exit fullscreen mode




If Not Using Fragments

  • Extra Dom nodes :
    Using a regular container introduces additional DOM nodes in the rendered output, which can lead to increased memory usage and slightly slower rendering.

  • CSS conflicts :
    If the wrapper elements has it's own CSS styles or classes, they might unintentionally affect the layout or styles of the child elements inside the component.

  • Semantic impact :
    Sometimes, adding extra wrapper elements can change the sematic structure of the document, which might not be desirable from an accessibility standpoint.

  • Nesting depth :
    Repeatedly nesting elements within multiple containers may make the component tree deeper, potentially affecting performance and readability.

React Fragments offer a straightforward and elegant solution for structuring components in React applications. By eliminating the need for extra wrapper elements, they contribute to cleaner code and a more efficient development process.

Stay tuned for more insights and practical tips🚀

Buy Me A Coffee

Top comments (0)