If you are interested to learn about the React State
React Fragments allow you to wrap or group multiple elements without adding an extra node to the DOM. This can be useful when rendering multiple child elements/components in a single parent component
In React, whenever you want to render something on the screen, you need to use a render method inside the component. This render method can return single elements or multiple elements. The render method will only render a single root node inside it at a time. However, if you want to return multiple elements, the render method will require a ‘div‘ tag and put the entire content or elements inside it. This extra node to the DOM sometimes results in the wrong formatting of your HTML output and also not loved by the many developers.
Example
// Rendering with div tag
class App extends React.Component {
render() {
return (
//Extraneous div element
<div>
<h2> Hello World! </h2>
<p> Welcome to the futurefundamentals. </p>
</div>
);
}
}
To solve this problem, React introduced Fragments from the 16.2 and above version. Fragments allow you to group a list of children without adding extra nodes to the DOM.
Syntax
<React.Fragment>
<h2> child1 </h2>
<p> child2 </p>
.. ..... .... ...
</React.Fragment>
Example
// Rendering with fragments tag
class App extends React.Component {
render() {
return (
<React.Fragment>
<h2> Hello World! </h2>
<p> Welcome to the futurefundamentals. </p>
</React.Fragment>
);
}
}
Why we use Fragments?
The main reason to use Fragments tag is:
- It makes the execution of code faster as compared to the div tag.
- It takes less memory.
Fragments Short Syntax
There is also another shorthand exists for declaring fragments for the above method. It looks like empty tag in which we can use of ‘<>’ and ” instead of the ‘React.Fragment‘.
Example
//Rendering with short syntax
class Columns extends React.Component {
render() {
return (
<>
<h2> Hello World! </h2>
<p> Welcome to the futurefundamental</p>
</>
);
}
}
Keyed Fragments
The shorthand syntax does not accept key attributes. You need a key for mapping a collection to an array of fragments such as to create a description list. If you need to provide keys, you have to declare the fragments with the explicit <React.Fragment> syntax.
Note: Key is the only attributes that can be passed with the Fragments.
Example
Function = (props) {
return (
<Fragment>
{props.items.data.map(item => (
// Without the 'key', React will give a key warning
<React.Fragment key={item.id}>
<h2>{item.name}</h2>
<p>{item.url}</p>
<p>{item.description}</p>
</React.Fragment>
))}
</Fragment>
)
}
Typical use cases
1) Return multiple elements
The most common use case for React fragments is probably to return multiple elements.
2) Conditional rendering
React fragments can be used when elements are rendered conditionally. They can make rendering groups of elements a lot easier as they remove the use of extra div elements.
3) To Render Arrays
Fragments can also help when rendering arrays because fragments can have keys. Let’s say there is an array of user objects and all the users are to be rendered mirziamov.ru. A key prop has to b set for every user, in this case, to avoid a warning from React. So Fragments can be used in such cases as well.
Key is the only prop that can be passed to a React Fragment. Also, note that the short syntax <></> of Fragments does not support keys.
Should fragments be used?
So are fragments worth using? Here are the few reasons why they are –
- It’s a bit faster and has less memory usage as compared to an extra div (no need to create an extra DOM node). This includes a real benefit on very large applications with very deep or large trees in DOM, but application performance often suffers from death by 1000 cuts. This can be one cut less.
- Flex, CSS Grids, and a few other CSS mechanisms have a special parent-child relationship, and adding divs in the middle makes it hard to keep the specified layout while extracting logical components.
- The DOM inspector is less cluttered.
