Há alguns meses a equipe de engenharia do Facebook lançou oficialmente a versão 16.0.0 do React. Esta versão trouxe uma reescritura do core (também conhecida como React Fiber) e uma série de melhorias para a biblioteca, como os portais, limites de erros (error boundaries), etc. Uma das novas funcionalidades foram os fragmentos.

Os fragmentos são basicamente uma maneira de você conseguir retornar diversos componentes filhos diretamente para o método render do seu componente, sem a necessidade de utilizar tags, como uma div, para encapsular eles (e isso inclui Strings também!).

Em termos práticos, isso significa que conseguimos fazer isso:

class Nomes extends React.Component {
  render() {
	return ([
  	<p key="1">João</p>,
  	<p key="2">Maria</p>,
  	<p key="3">Dagoberto</p>,
  	<Nome key="4" />
	])
  }
}

Este exemplo está disponível aqui.

Mas apesar da melhoria, haviam algumas coisas que pareciam estranhas em relação ao código JSX que estamos acostumados a escrever:

• Os elementos filhos no array precisam ser separados por vírgula
• Os elementos filhos precisam definir a propriedade key
• String precisam ser encapsuladas por aspas

Para resolver isso, a versão 16.2.0 do React trouxe uma nova abordagem. O React agora oferece o elemento de primeira classe <Fragment>. A ideia é que utilizemos esta tag ao invés dos colchetes. Isso faz com que não precisemos usar mais vírgulas, aspas e nem a propriedade key. Veja só um exemplo prático:

render() {
  return (
	<>
  	Eu sou um texto
  	<h2>Eu sou um H2</h2>
  	Eu sou mais texto
  	<h2>Eu sou mais um H2</h2>
	</>
  );
}

Este código resulta em:

Este exemplo está disponível aqui.

Repare que cada um destes itens é interpretado como um item único, mesmo sem a divisão por vírgulas. Além disso, como neste caso não precisamos passar nenhuma key para os atributos, é possível usar o <></>.

Para mais detalhes sobre as melhorias em fragmentos, acesse este link. O suporte para os editores e outras ferramentas, como o create-react-app, será disponibilizado nos próximos dias.