React: conheça as novidades da versão 18 do React

Vamos começar pelo mais importante: o quão difícil é mudar da versão 17 para a 18? Já deixo um spoiler logo aqui pra dizer que é bem tranquilo, acompanha comigo os passos necessários:

Uptade das versões

Primeiro, fazemos update das versões. Utilizando o npm, o comando é o seguinte:

Renderização

Segundo, no arquivo que você renderiza a aplicação (normalmente src/index.js ou src/index.tsx se você usa TypeScript). Nós precisamos alterar o método render:

E agora precisamos ajustar o import e a forma de renderizar:

E é só isso. Nada mais precisa ser alterado e você já passa a usufruir de todas as melhorias que foram implementadas.

Agora que já sabemos como fazer a atualização, vamos ver mais de perto alguns pontos bacanas dessa versão.

Principais pontos da versão 18 do React JS

Uma das melhorias mais legais é o automatic batching. Esse é um termo difícil de traduzir para o nosso idioma, mas vamos analisar um exemplo de um componente que altera o estado local de duas formas diferentes, uma síncrona e outra assíncrona:

O que o React faz, nesse cenário, é agrupar (por isso o termo batching, que é algo como “fazer alguma coisa em lotes, ou seja, agrupadas”) todas as mudanças e só renderizar o componente uma única vez. Então, a cada clique no botão “Incrementar”, o componente é renderizado uma única vez. Mesmo na versão 17 ele tem esse comportamento.

Porém, a melhoria está na alteração de forma assíncrona. Na versão 17, a cada clique no botão “Incrementar daqui um segundo” o componente é renderizado duas vezes. Já na versão 18, o batching é feito e ele só renderiza uma única vez. Top, né?

Outro ponto bacana é o Suspense. Se você ainda não conhece, ele é utilizado para carregar componentes de forma “preguiçosa”. Desse jeito:

Repare que enquanto as páginas são carregadas, o React renderiza o conteúdo <div>Carregando...</div>.

A mudança que veio é: o Suspense agora pode ser utilizado para obtenção de dados, além do carregamento preguiçoso. Outro ponto importante é que agora ele pode ser utilizado para quem utiliza renderização do lado do servidor, o que não era possível em versões anteriores.

Por último, mas não menos importante, vieram algumas APIs novas para tratar concorrência:

• useTransition(): um hook para iniciar transições, incluindo um valor para rastrear o estado pendente.
• startTransition(): um método para iniciar transições quando hooks não pode ser utilizados.
• useDeferredValue(): permite adiar a nova renderização de uma parte não urgente da árvore.

Na maioria dos casos, esses hooks serão utilizados em bibliotecas específicas que sofrem com alguns problemas de concorrência.

Quer ver todos os detalhes da atualização na íntegra? Se liga aqui que você confere direto da fonte as novidades da versão.

Curte frontend e quer aprender a utilizar essa biblioteca incrível? Cola aqui na formação React com TypeScript.

Vida longa e próspera!