Porque  
faz com que você tenha espaços não separáveis, você só deve usá-lo quando necessário. Na maioria dos casos, isso terá efeitos colaterais indesejados.
As versões mais antigas do React, acredito que todas as anteriores à v14, seriam inseridas automaticamente <span> </span>
quando você tivesse uma nova linha dentro de uma tag.
Embora eles não façam mais isso, essa é uma maneira segura de lidar com isso em seu próprio código. A menos que você tenha um estilo que vise especificamente span
(má prática em geral), este é o caminho mais seguro.
Por seu exemplo, você pode colocá-los em uma única linha, pois é muito curta. Em cenários de linhas mais longas, é assim que você provavelmente deve fazer:
<div className="top-element-formatting">
Hello <span className="second-word-formatting">World!</span>
<span> </span>
So much more text in this box that it really needs to be on another line.
</div>
Este método também é seguro contra editores de texto de corte automático.
O outro método é usar o {' '}
que não insere tags HTML aleatórias. Isso pode ser mais útil ao estilizar, destacar elementos e remover a desordem do DOM. Se você não precisa de compatibilidade com versões anteriores do React v14 ou anterior, este deve ser o seu método preferido.
<div className="top-element-formatting">
Hello <span className="second-word-formatting">World!</span>
{' '}
So much more text in this box that it really needs to be on another line.
</div>