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

O que é preciso para usar a versão 18 do React JS

Temos agora uma nova versão do React disponível, a versão 18. Ela chega com algumas melhorias, novas APIs, no caso, novos hooks =]. Além disso, também tem novidade para quem utiliza renderização no lado do servidor com o uso do Suspense.

Vamos dar uma olhada juntos em alguns pontos relevantes da mudança? Então vem comigo.

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:

npm install react@18 react-dom@18

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:

// antes era assim. 
import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));

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

// agora é assim. 
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

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:

const Contador = () => {
    const [contador, setContador] = useState(0);

    const incrementar = () => {
        setContador(estadoAtual => estadoAtual + 42);
        setContador(estadoAtual => estadoAtual + 84);
    };
    const incrementarDaquiUmSegundo = () => {
        setTimeout(() => {
            setContador(estadoAtual => estadoAtual + 42);
            setContador(estadoAtual => estadoAtual + 84);
        }, 1000);
    };

    return (
        <div>
            <strong>{contador}</strong>
            <button onClick={incrementar}>Incrementar</button>
            <button onClick={incrementarDaquiUmSegundo}>Incrementar daqui um segundo</button>
        </div>
    );
};

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:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const Sobre = lazy(() => import('./routes/Sobre'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Carregando...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/sobre" element={<Sobre />} />
      </Routes>
    </Suspense>
  </Router>
);

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!