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.

Read the official docs here.