What are React Fragments?
React fragments were first introduced in November 2017. Fragments are a new way to add many elements to a React Component without having to wrap them in a DOM node. React Fragments do not produce any more DOM elements, therefore the child components of a Fragment will be rendered without any wrapping DOM node.
Why React Fragments?
This is because React requires components return only one HTML element. The most common choice would be to use a wrapper <div>. This would result in the following HTML to be rendered, which is incorrect because a <div> can’t appear as a child of <tr>.
Assume you have a Table component that renders an HTML table, and the columns are rendered by another component called Columns. Here’s some code you could use for this:
function Table() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
function Columns() {
return (
// the wrapper div used to return two <td> tags
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
This would result in invalid HTML to be rendered because the wrapper <div> from the Columns component is rendered inside the <tr>.
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
React Fragments were introduced precisely to solve this issue.
How to use them?
You can use React Fragments by using the <React.Fragments> tag to wrapping your child elements that return by your component.
In the previous example, the Columns component would appear as follows.
function Columns() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
The Table component would then be converted into the following HTML:
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
As you can see, there is no wrapping tag in the rendered HTML. Unlike the previous case, this will not result in invalid HTML.
React Fragments can also be used with a short syntax that resembles an empty tag:
function Columns() {
return (
// using <> is just like using <React.Fragment>
<>
<td>Hello</td>
<td>World</td>
</>
// using </> is just like using </React.Fragment>
);
}
When to use them?
In general, you should use React Fragments whenever you would otherwise use an unnecessary wrapper <div> to make your component return more than one HTML element.
So, don’t think of React Fragments as a replacement for the <div>s in your HTML. On the contrary, consider them, a way to avoid unnecessary tags and, as a result, achieve a better mark-up structure.
When you need to return multiple elements, React fragments are probably the most popular use case. When elements are rendered conditionally, React fragments can be used. They can make rendering groups of elements much easier by eliminating the use of extra div elements. React Fragments are commonly used in these cases.
Return multiple elements
The most basic use case for React fragments is probably when you want to return multiple elements. This is easy with fragments, and you don’t need a wrapper div for the elements.
Conditional rendering
React fragments can also be used when conditionally render elements. They make it much easier to render groups of elements without the need for additional mark-up.
Conclusion:
Thank you for taking the time to read. I hope you found this article useful. For more blogs visit our website- Techrish solutions
u