Como migrar para o React 18?

O React 18  evolui a popular estrutura de componentes JavaScript com novos recursos baseados em renderização e pausa simultâneas. Ele promete melhor desempenho, mais recursos e uma experiência de desenvolvedor aprimorada para aplicativos que fazem a transição.

Neste artigo, mostraremos como atualizar as bases de código existentes para o React 18. Lembre-se de que este guia é apenas uma visão geral das alterações mais amplamente aplicáveis. A migração deve ser bastante indolor para pequenos projetos que já seguem as melhores práticas do React; grandes conjuntos de componentes complexos podem causar alguns problemas, que detalharemos a seguir.

Instalando o React 18

Antes de fazer qualquer outra coisa, use npm para atualizar a dependência React do seu projeto para a versão 18:

$ npm install react@latest react-dom@latest

A nova versão tecnicamente não é incompatível com versões anteriores. Novos recursos são ativados por assinatura. Como você ainda não alterou o código, você deve conseguir executar seu aplicativo e ver se ele é renderizado corretamente. Seu projeto funcionará com o comportamento existente do React 17.

$ npm start

Habilitando recursos do React 18: nova API raiz

Usar o React 18 sem nenhuma alteração na base de código causará um efeito colateral: você verá um aviso do console do navegador toda vez que seu aplicativo for montado no modo de desenvolvimento.

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.

Essa mensagem de descontinuação pode ser ignorada com segurança, a menos que você esteja pronto para atualizar seu projeto. Se você quiser usar os recursos do React 18, você precisa fazer a alteração descrita nele. A ReactDOM.render()função antiga foi substituída por uma nova API raiz que é mais orientada a objetos. Além da facilidade de uso aprimorada, ele também ativa o sistema de renderização paralela, que suporta todos os novos recursos do título.

Em seu arquivo index.jsou app.jsencontre linhas semelhantes a estas:

Este é um ponto de entrada típico para um aplicativo React. Ele renderiza uma instância do Appcomponente importado como o elemento raiz do seu aplicativo. O conteúdo renderizado é armazenado como innerHTMLum elemento HTML com uma extensão id="react".

Para mudar para a API raiz do React 18, substitua o código acima pelo seguinte:

O efeito é semelhante ao da ReactDOM.render()API antiga. Em vez de inicializar o elemento raiz e renderizar seu aplicativo como uma única operação imperativa, o React 18 força você a criar primeiro o objeto raiz e depois renderizar seu conteúdo explicitamente.

Em seguida, encontre os locais no código onde você desmontará o nó raiz. Navegue ReactDOM.unmountComponentAtNode()até um novo unmount()método em seu objeto raiz:

Substituindo retornos de chamada de renderização

ReactDOM.render()O argumento de retorno de chamada de método opcional não tem contrapartida direta na API raiz do React 18. Anteriormente, você podia usar este código para fazer login Rendered!no console depois que o React terminasse de renderizar o nó raiz:

Esse recurso foi removido porque o tempo de retorno de chamada é imprevisível ao usar os novos recursos de hidratação parcial do servidor React 18 e renderização encadeada. Se você já estiver usando retornos de chamada de renderização e precisar manter a compatibilidade, poderá obter um comportamento semelhante usando o mecanismo de link:

React chama referências de função ao montar componentes. Definir uma referência ao componente que é seu nó raiz permite determinar quando a renderização ocorre, fornecendo um efeito semelhante ao antigo sistema de retorno de chamada de renderização.

Depurando problemas de atualização

Seu aplicativo agora deve renderizar usando os recursos do React 18 e sem nenhum aviso do console. Teste minuciosamente seu aplicativo para garantir que tudo funcione conforme o esperado. Se você encontrar problemas, poderá corrigi-los com essas soluções gerais.

Verifique <modo estrito>

Aplicativos encapsulados em componentes <StrictMode>podem se comportar de maneira diferente quando renderizados no modo de design do React 18. Isso ocorre porque o modo estrito agora verifica se sua base de código suporta estado reutilizável , um conceito que será totalmente introduzido no React em uma versão futura.

O estado reutilizável permite que o React religue um componente removido anteriormente, restaurando automaticamente seu último estado. Isso requer que seus componentes sejam resistentes a efeitos de chamada dupla. O modo estrito agora ajuda você a se preparar para a reutilização simulando a montagem, desmontagem e remontagem de seus componentes sempre que eles são usados, identificando quaisquer problemas em que o estado anterior não possa ser restaurado. Você pode desabilitar o modo estrito se encontrar problemas em seu aplicativo ou suas dependências que você não está preparado para resolver.

Suporte à atualização do estado do lote

O React 18 altera como as atualizações de estado são “empacotadas” para melhorar o desempenho. Quando você altera os valores de estado várias vezes em uma função, o React tenta mesclá-los em uma nova renderização:

Esse mecanismo melhora a eficiência, mas anteriormente só funcionava dentro de manipuladores de eventos React. No React 18, ele funciona em todas as atualizações de estado, mesmo que venham de manipuladores de eventos nativos, timeouts ou promessas. Alguns códigos podem se comportar de forma diferente de antes se você executar atualizações de estado sequenciais em qualquer um desses locais.

Você pode desabilitar esse comportamento em situações em que não está pronto para refatorar seu código. Envolva as atualizações de estado flushSync()para forçá-las a confirmar imediatamente:

Pare de usar recursos removidos e não suportados

Depois que todos os aspectos acima forem levados em consideração, seu aplicativo deverá ser totalmente compatível com o React 18. Embora ainda haja algumas alterações na superfície da API , elas não devem afetar a maioria dos aplicativos. Aqui estão alguns deles para estar ciente:

• unstable_changedBitsfoi removido – esta API não suportada permitiu que as atualizações contextuais fossem desativadas. Não está mais disponível.
• Object.assign()O polyfill foi removido – você deve adicionar manualmente object-assigno pacote polyfill se precisar suportar navegadores muito antigos sem um arquivo Object.assign().
• O Internet Explorer não é mais suportado – O React descartou oficialmente a compatibilidade com o Internet Explorer até o fim do suporte para o navegador em junho. Você não deve atualizar para o React 18 se ainda precisar que seu aplicativo funcione no IE.
• O uso de suspender com undefinedfallback agora é equivalente a nulllimites de suspensão omitidos anteriormente fallback={undefined}, permitindo que o código seja cascateado para o próximo limite pai na árvore. O React 18 agora respeita os componentes do Suspense sem fallback.

Renderização do lado do servidor

Aplicativos que usam renderização do lado do servidor exigirão mais algumas alterações para funcionar com o React 18.

De acordo com a nova API raiz, você deve substituir a hydrate()função antiga no código do lado do cliente pela nova hydrateRoot()fornecida pelo react-dom/clientpacote:

Em seu código do lado do servidor, substitua as chamadas de API de renderização legadas por suas contrapartes mais recentes. Na maioria dos casos, você deve mudar renderToNodeStream()para um novo renderToReadableStream(). As novas APIs de streaming expõem os recursos de renderização do servidor de streaming do React 18, onde o servidor pode continuar entregando novo HTML ao navegador depois que seu aplicativo for renderizado inicialmente.

Comece a usar os recursos do React 18

Agora que você atualizou, pode começar a tornar seu aplicativo mais poderoso incorporando recursos do React 18. O uso de simultaneidade do React significa que a renderização de componentes pode ser interrompida, abrindo novas possibilidades e interfaces de usuário mais responsivas.

Alguns dos recursos adicionados incluem as principais atualizações do Suspense, uma maneira de priorizar atualizações de estado usando Transitions e um mecanismo interno para limitar as re-renderizações causadas por atualizações não urgentes, mas frequentes. Há também algumas mudanças e melhorias diversas: você pode retornar undefinedde render()um método de componente, o aviso sobre chamar setState()componentes não conectados foi removido e alguns novos atributos HTML como imageSizes, imageSrcSete são aria-descriptionreconhecidos pelo renderizador React DOM.

Resumo

O React 18 está estável e pronto para ser usado. Na maioria dos casos, o processo de atualização deve ser rápido e fácil, exigindo apenas uma atualização do npm e uma mudança para a nova API raiz. No entanto, você ainda deve testar todos os seus componentes: eles podem se comportar de maneira diferente em algumas situações, como no modo estrito ou quando o empacotamento automático é aplicado.

Esta nova versão aponta para a direção futura do React como um framework de alto desempenho para todos os tipos de aplicações web. Ele também estende os recursos de renderização do lado do servidor do React, adicionando pausa no lado do servidor e a capacidade de continuar transmitindo conteúdo para seus usuários após a renderização inicial. Isso dá aos desenvolvedores mais flexibilidade para distribuir a renderização no cliente e no servidor.