3

Estou estudando React mais a fundo e em um dos cursos que estou acompanhando é citado o uso do <React.Fragment> para renderizar vários elementos de uma vez.

Normalmente nos meus componentes eu utilizo uma <div>:

<div>
   <h6>Olá mundo</h6>
   <h3>Até logo</h3>
</div>

Mas vi que também é possível com:

<React.Fragment>
   <h6>Olá mundo</h6>
   <h3>Até logo</h3>
</React.Fragment>

Quais as vantagens de se utilizar o <React.Fragment> em comparação com uma <div>?

Em quais casos é apropriado utilizar a <div> e em quais casos devo utilizar o Fragment?

1
  • 1
    Você também pode usar <> 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. Commented 18/04/2020 às 20:33

1 Resposta 1

4

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .