Uma das mais notáveis breaking changes do React foi a versão 16, a chamada
React Fiber, em que todo
o core da aplicação foi reescrito. Além da adição de
Portals,
componentDidCatch,
melhorias no Server
Rendering*
*e mais…

Depois desse grande anúncio, não eram esperadas mudanças significativas nas
próximas versões… Até que nos deparamos com o novo
React.Fragment.

Se você já desenvolveu aplicações React para o mundo real (Além do ToDoList),
com certeza já se frustrou tentando renderizar vários elementos de uma vez:

render() {
  return (
    
App React
    
Vamos começar!
  )
}

Ou apenas um array direto:

render() {
  return [
    
App React
    
Vamos começar!
  ]
}

Pra isso, era necessário encapsular os elementos em uma tag:

render() {
  return 

    
App React
    
Vamos começar!
  
}

Ok, essa *div *não serve pra nada, mas o problema foi resolvido.

E se você deseja separar apenas alguns itens de uma lista dentro de um
componente, para renderizá-los dentro de uma UL? Encapsular com uma div vai
quebrar sua aplicação (ul>div>li??)…

Então, no React
16
foi implementado uma nova possibilidade de render, onde é permitido retornar
um array diretamente, a única exigência é colocar o atributo key nos elementos
do array:

render() {
  return [
    
App React
    
Vamos começar!
  ]
}

É preciso lembrar de colocar atributos key nos elementos que estão dentro de um
array, mas ok. Problema resolvido novamente.

Essas soluções funcionam, mas são um incômodo, geram código desnecessário, e
sujam o HTML com *divs *que não tem utilidade, ou nos forçam a ficar colocando
atributos *key *que não nos interessam muito.

Finalmente, no React 16.2 foi implementada a funcionalidade
React.Fragment.

Na prática, podemos encapsular um array, ou múltiplos elementos com uma “tag
fantasma”, que não será renderizada no HTML final:

import React, { Fragment } from 'react'

render() {
  return 
    
App React
    
Vamos começar!
  
}

Agora não precisamos mais sujar o HTML, nem ficar retornando array de elementos
com atributo key (meio confuso, não?!).

Apesar de ser um elemento que não será renderizado, ele também aceita *keys,
*caso necessário:

render() {
  
}

Pra simplificar ainda mais, se você é do tipo preguiçoso e não quer escrever
Fragment, pode configurar seu projeto (Babel, ESlint, etc) para aceitar a
sintaxe reduzida, que é apenas uma tag vazia …

return (
  
    
App React
    
Vamos começar!
  
);

É sério, isso funciona! A equipe do React disponibilizou um Codepen com isso funcionando.

Conclusão

Enquanto nós mortais dormimos, o time do React está trabalhando arduamente para
melhorar mais a experiência dos desenvolvedores.

Espero que depois desse breve post, você possa apagar do seu projeto aquele
monte de divs inúteis, e substituí-las por !

Gostou? Recomende, compartilhe, comente!

Obrigado! :)