I was reading the React doc and get confused by the topic Fragments.
Since we can basically return an array in React, in what situation would one need <Fragements />
?
Here is a code sample:
const ReturnArray = () => {
const items = [
<div key={1}>Item 1</div>,
<div key={2}>Item 2</div>,
<div key={3}>Item 3</div>,
]
return items
}
const ReturnFragments = () => {
const items =
<React.Fragment>
<div key={1}>Item 1</div>
<div key={2}>Item 2</div>
<div key={3}>Item 3</div>
</React.Fragment>
return items
}
I think they are the same.
Most existing topics talk about "key warning issues" like this on github, but I just want to know the use cases of <Fragments />
Edit:
Please tell me if there is anything ambiguous.
To be specific:
Please explain the difference between <ReturnArray />
and <ReturnFragments />
. They both return multiple elements without useless <div>
tag. Why bother using the extra <React.Fragment />
part?
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.
Therefore, React fragments are better than the 'div' tags. With React Fragment, you can render multiple elements of a component without adding extra div tags. We can write cleaner, more readable code with React Fragments. It takes up less memory and renders components faster. Each component is rendered as expected.
React. Children. toArray returns the children opaque data structure as a flat array with keys assigned to each child.
<> is the shorthand tag for React. Fragment which allows us to group a list of elements without wrapping them in a new node. The only difference between them is that the shorthand version does not support the key attribute.
Official document says
Using array notation has has some confusing differences from normal JSX:
Children in an array must be separated by commas.
Children in an array must have a key to prevent React’s key warning.
Strings must be wrapped in quotes.
So to make it simple, React provides Fragment component that can be used in place of arrays.
Consider how we can wrap multiple children using array
render() {
return [
"Some text.",
<h2 key="heading-1">A heading</h2>,
"More text.",
<h2 key="heading-2">Another heading</h2>,
"Even more text."
];
}
And how it can be achieved using Fragments.
render() {
return (
<Fragment>
Some text.
<h2>A heading</h2>
More text.
<h2>Another heading</h2>
Even more text.
</Fragment>
);
}
Taken directly from official document.
Fragments can be written as below aswell.
render() {
return (
<>
Some text.
<h2>A heading</h2>
More text.
<h2>Another heading</h2>
Even more text.
</>
);
}
There are two major advantages of using Fragments over array in return statement
Example
const ReturnFragments = () => {
const items = list.map((item) => {
<React.Fragment key={item.id}>
<div key={1}>Item 1</div>
<div key={2}>Item 2</div>
<div key={3}>Item 3</div>
</React.Fragment>
})
return items
}
Fragments and arrays are intended to address different use cases and behave differently in one important way.
Fragments will not warn if you omit a key
property, while arrays will.
If your component returns several static children, return a fragment.
<Fragment>
<li>One advantage of our product is lorem</li>
<li>Another is ipsum!</li>
</Fragment>
If your component returns dynamically generated children, return an array.
items.map(item => <li key={item}>{item}</li>);
I am paraphrasing the maintainers' responses to an issue I opened in the React repo about a similar question. I highly recommend reading it for more detail: https://github.com/facebook/react/issues/12776
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With