React fragments are used whenever a component needs returned with multiple children.
Specifically, fragments are useful when I don't want to clutter the DOM with unnecessary <div>
tags that are used purely to wrap children in a React render method.
For example, React fragments are commonly used to render list items:
render() {
return (
<React.Fragment>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</React.Fragment>
);
}
This solves the issue of breaking the DOM HTML table specifications by not adding unnecessary <div>
elements around <td>
elements.
Do keep in mind, if it is a list being rendered, React does still throw warnings when children don't have the key={}
prop.