- A versão 0.76 do React Native foi lançada no npm. Esta versão já inclui a nova arquitetura por padrão e oferece suporte completo aos recursos mais recentes do React.
- A nova arquitetura oferece suporte a recursos como Suspense, Transitions, batching automático e
useLayoutEffect, além de introduzir um novo sistema de módulos e componentes nativos que permite escrever código com segurança de tipos.
- É o resultado de uma reescrita fundamental do React Native iniciada em 2018, e foi projetada para que a maioria dos apps possa migrar gradualmente para a nova arquitetura.
- O React Native 0.76 pode ser adotado pela maioria dos apps com um nível de esforço semelhante ao das versões anteriores, e bibliotecas populares já oferecem suporte à nova arquitetura.
O que é a nova arquitetura?
- A nova arquitetura é uma reescrita completa dos principais sistemas do React Native, incluindo renderização de componentes, comunicação entre JavaScript e abstrações nativas, e a forma de agendar trabalho entre threads.
- A arquitetura anterior se comunicava com a plataforma nativa por meio de uma bridge assíncrona, mas a nova arquitetura foi projetada para suportar tanto atualizações síncronas quanto assíncronas.
- A nova arquitetura é composta por quatro partes principais: o sistema de módulos nativos, o novo renderizador, o loop de eventos e a remoção da bridge.
Novos módulos nativos
- Escritos em C++ para oferecer novos recursos
- Comunicação síncrona com o runtime nativo
- Segurança de tipos entre JavaScript e código nativo
- Compartilhamento de código entre plataformas
- Lazy module loading por padrão
- É possível aproveitar todos os recursos da implementação nativa em C++ a partir de APIs JavaScript/TypeScript
- O Codegen permite definir contratos de tipo robustos
- Os módulos são carregados na memória apenas quando necessários, reduzindo o tempo de inicialização do app
Novo renderizador
- Reescrito em C++, oferecendo os seguintes benefícios:
- Renderização de atualizações com diferentes prioridades em diferentes threads
- Leitura síncrona de layout em outras threads
- Código C++ compartilhado entre todas as plataformas
- Agora a hierarquia de views é armazenada como uma estrutura de árvore imutável
- Permite processar atualizações com segurança entre threads
- Permite lidar com várias árvores em andamento que representam diferentes versões da interface do usuário
- É possível interromper atualizações de baixa prioridade, renderizar itens urgentes como entrada do usuário e depois retomar as atualizações de baixa prioridade
Loop de eventos
- A nova arquitetura implementa um modelo claro de tratamento de loop de eventos, reduzindo as diferenças entre React DOM e React Native.
- Implementa um modelo bem definido de processamento do loop de eventos para tratar tarefas na thread de JavaScript
- O loop de eventos organiza atualizações e eventos de forma previsível, permitindo interromper atualizações de baixa prioridade por eventos urgentes do usuário.
- Fica mais alinhado com as especificações da web
- Servirá de base para mais recursos de navegador no futuro
Remoção da bridge
- A nova arquitetura remove a bridge, permitindo comunicação direta e eficiente entre JavaScript e código nativo.
- Com a remoção da bridge, o tempo de inicialização melhora, há menos crashes causados por comportamento indefinido, e relatórios de erro e depuração ficam mais fáceis.
Novos recursos
- Transitions
- Transitions, um novo conceito do React 18, distingue entre atualizações urgentes e não urgentes.
- Atualizações urgentes exigem resposta imediata, enquanto atualizações de Transition fazem a UI passar de uma view para outra.
- O batching automático agrupa mais atualizações de estado para evitar renderizações de estados intermediários, tornando o React Native mais rápido e fluido.
- A nova arquitetura oferece suporte a
useLayoutEffect, permitindo ler informações de layout de forma síncrona e atualizar a UI no mesmo frame.
- A nova arquitetura oferece suporte completo ao Suspense, introduzido no React 18, para lidar com estados de carregamento e dar maior prioridade à entrada do usuário.
Como fazer o upgrade
- Ao atualizar para a versão 0.76, a maioria dos apps poderá fazer isso com o mesmo nível de esforço de outras versões graças à camada de interoperabilidade
- No entanto, para aproveitar totalmente a New Architecture e os recursos concorrentes, será necessário migrar módulos e componentes nativos customizados
- Para desenvolvedores de apps
- É necessário atualizar bibliotecas, componentes nativos customizados e módulos nativos customizados para oferecer suporte completo à New Architecture
- Houve colaboração para que a maioria das bibliotecas populares de React Native já ofereça suporte à New Architecture
- Para mantenedores de bibliotecas, recomenda-se migrar as bibliotecas para as novas APIs de módulos e componentes nativos
Resumo do GN⁺
- A transição para a New Architecture deve se tornar um marco importante no desenvolvimento com React Native. Com suporte a atualizações síncronas e assíncronas, eliminação do gargalo da bridge e possibilidade de ler layouts em outras threads, espera-se uma série de melhorias em desempenho e experiência do usuário
- Também chama atenção o suporte completo aos recursos concorrentes do React 18. Com Suspense e Transition, será possível criar uma UX mais responsiva e natural
- Ainda assim, apps e bibliotecas existentes provavelmente precisarão de trabalho de migração para oferecer suporte completo à New Architecture. O processo deve ser gradual, mas, quando concluído, permitirá aproveitar plenamente suas vantagens
- Essa arquitetura já está sendo usada nos apps Facebook e Instagram da Meta, e há casos de sucesso como Expensify, Kraken e BlueSky
- No geral, a New Architecture parece um grande avanço para o futuro do React Native. Fica a expectativa de que ela se consolide bem com a colaboração da comunidade
6 comentários
Parece que faz muito tempo desde a primeira vez que ouvi falar de React Native. Mesmo tendo começado no Facebook, é até surpreendente que ainda não tenha chegado à versão 1..
Nunca usei RN, então fiquei curioso. Pela sensação, parece que ele seria mais otimizado para Android, mas é surpreendente que, na prática, o desempenho seja melhor no iOS.
Parece que quase todos os nossos crashes estão acontecendo no Android.
No Android, está simplesmente terrível... terrível mesmo..
Parece que não faz muito tempo que trocaram o motor para o Hermes, mas pelo visto já reformularam tudo de novo.
Comentários do Hacker News
Tenho experiência desenvolvendo apps em React Native e APIs de backend há 4 anos, e a migração para o Expo resolveu muitos problemas, mas ainda existem bugs. O iOS é mais estável e também tem desempenho melhor que o Android. React Native é fácil de aprender e tem um grande ecossistema de JS, então vale a recomendação, mas atualmente estou usando Flutter
Existem várias opiniões sobre React Native; algumas pessoas reclamam do Expo e recomendam Kotlin Multiplatform. Também há quem diga que as discussões no Hacker News estão ficando cada vez mais sem sentido
Como desenvolvedor Flutter, acho que Swift UI e Compose são mais adequados para desenvolvimento mobile, e não usaria Flutter nem React Native ao começar um novo app
React Native é aceitável no iOS, mas lento no Android. Hermes é interessante, mas ainda exige muitos polyfills. Espero pelo dia em que a web substituirá o React Native
Estou desenvolvendo o Bluesky usando Expo/RN, e nos testes iniciais da nova arquitetura o desempenho no Android melhorou
Tive uma experiência positiva usando React Native com Expo, e como desenvolvedor solo o RN torna muita coisa possível. Estou ansioso pela nova arquitetura
A velocidade de renderização do Flutter é 5 vezes mais rápida que a do React Native, e ao usar React na web a velocidade é maior
Vi um tweet dizendo que o Capacitor é útil para portar webapps em NextJS
O React Native melhorou bastante neste ano, e quando o react-strict-dom estiver pronto isso trará uma grande mudança