Remove unnecessary fragments
Keep your component structure simple by ensuring it is as flat as possible. For
example, a fragment,
<> ... </>, is only necessary when you have more than one
child element and the function expects a single JSX element returned.
For example, a fragment is required here:
const Component = () => (<><h1>Title</h1><h2>Subtitle</h2></>)
But not if you return a single element:
const Component = () => (<div><h1>Title</h1><h2>Subtitle</h2></div>)
This is also true for functions such as
map in a component. If you are only
returning a single element, then remove all fragments.