Como você deve saber, o JSX é um mero açúcar sintático. Não faz parte da especificação do ECMAScript. Assim, quando compilado, o JSX se torna algo mais ou menos assim:
React.createElement(component, props, ...children);
Portanto, agora entendemos a necessidade de só se retornar um elemento React por componente. Isto é válido, já que retorna somente um elemento:
function MyComponent() {
return (
<React.Fragment>
<strong>Foo</strong>
<span>Bar</span>
</React.Fragment>
);
}
Contudo, este outro exemplo já não é válido, já que um componente não pode retornar mais de dois elementos:
function MyComponent() {
// ❗️ Errado!
return (
<strong>Foo</strong>
<span>Bar</span>
);
}
Desse modo, se você precisar retornar mais de dois elementos em um mesmo nível, o React obriga-o a envolvê-los em um único componente. Anteriormente à introdução dos fragmentos, você deveria utilizar uma tag do HTML ou algum outro componente genérico, o que nem sempre era ideal, já que seria inserido mais um elemento HTML no DOM, podendo inclusive afetar a acessibilidade ou dificultar a componentização tão importante para o React.
A documentação sobre fragmentos explica essas motivações com um pouco mais de aprofundamento.
Quais as vantagens de se utilizar o <React.Fragment>
em comparação com uma <div>
?
Conforme colocado acima, a principal vantagem de se utilizar um fragmento é o fato de você poder retornar múltiplos elementos a um mesmo nível sem necessariamente ter que envolvê-los em algum componente que irá renderizar algum nó no DOM.
Por exemplo, no trecho abaixo, uma <div>
será renderizada:
function MyComponent() {
return (
<div>
<strong>Foo</strong>
<span>Bar</span>
</div>
);
}
ReactDOM.render(<MyComponent />, document.body);
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
Mas neste outro exemplo, nenhuma outra tag além de strong
e span
serão inseridas no DOM, já que um fragmento foi utilizado:
function MyComponent() {
return (
<React.Fragment>
<strong>Foo</strong>
<span>Bar</span>
</React.Fragment>
);
}
ReactDOM.render(<MyComponent />, document.body);
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
Em quais casos é apropriado utilizar a <div>
e em quais casos devo utilizar o Fragment
?
Utilize a div
— ou qualquer outro componente que irá renderizar algo na árvore do DOM — quando você quiser que isso aconteça. Se você não quiser que o componente que "envolve" seja renderizado no DOM, utilize um fragmento.
<>
e</>
no lugar da tag<React.Fragment>
. O efeito é o mesmo, mas fica mais fácil de ver o código e perceber que aquele elemento não será renderizado.