JSX позволяет вернуть только один блок, т.е.
<div>Первый блок</div>
<div>Второй блок</div>
вы вернуть не сможете. Чтобы не плодить лишние родительские div'ы, существует
<React.Fragment></React.Fragment>
в который можно обернуть несколько блоков и вернуть их. В DOM'е, который вам отрисовывает браузер он никак не отобразится. а запись
<></>
- это просто короткая запись фрагмента.
Ну а по факту ответ был дан выше - используйте при необходимости, ничего плохого в этом нет)