React Labs: What We've Been Working On – June 2022

15 de junho de 2022 por Andrew Clark, Dan Abramov, Jan Kassens, Joseph Savona, Josh Story, Lauren Tan, Luna Ruan, Mengdi Chen, Rick Hanlon, Robert Zhang, Sathya Gunasekaran, Sebastian Markbåge, e Xuan Huang

---

---

Normalmente, temos vários projetos em andamento a qualquer momento, variando do mais experimental ao claramente definido. Olhando para o futuro, gostaríamos de começar a compartilhar regularmente mais sobre o que temos trabalhado com a comunidade em todos esses projetos.

Para definir expectativas, este não é um roteiro com prazos claros. Muitos desses projetos estão sob pesquisa ativa e é difícil definir datas concretas de lançamento. Eles podem até nunca ser lançados em sua iteração atual, dependendo do que aprendermos. Em vez disso, queremos compartilhar com vocês os espaços de problemas sobre os quais estamos pensando ativamente e o que aprendemos até agora.

Server Components

Anunciamos uma demonstração experimental dos React Server Components (RSC) em dezembro de 2020. Desde então, temos finalizado suas dependências no React 18 e trabalhado em mudanças inspiradas por feedback experimental.

Em particular, estamos abandonando a ideia de ter bibliotecas de I/O bifurcadas (por exemplo, react-fetch) e, em vez disso, adotando um modelo async/await para melhor compatibilidade. Isso tecnicamente não bloqueia o lançamento do RSC, pois você também pode usar roteadores para buscar dados. Outra mudança é que também estamos nos afastando da abordagem de extensão de arquivo em favor de anotar limites.

Estamos trabalhando em conjunto com Vercel e Shopify para unificar o suporte de bundler para semânticas compartilhadas em webpack e Vite. Antes do lançamento, queremos garantir que as semânticas dos RSCs sejam as mesmas em todo o ecossistema React. Este é o principal bloqueador para alcançar a estabilidade.

Carregamento de Assets

Atualmente, assets como scripts, estilos externos, fontes e imagens são tipicamente pré-carregados e carregados usando sistemas externos. Isso pode tornar a coordenação em novos ambientes como streaming, Server Components e mais, complicada. Estamos considerando adicionar APIs para pré-carregar e carregar assets externos deduplicados através de APIs do React que funcionam em todos os ambientes React.

Também estamos considerando que estes suportem Suspense, para que você possa ter imagens, CSS e fontes que bloqueiam a exibição até serem carregadas, mas não bloqueiam o streaming e a renderização concorrente. Isso pode ajudar a evitar “pipoca” à medida que os visuais aparecem e o layout muda.

Otimizações de Renderização Estática do Servidor

Geração de Site Estático (SSG) e Regeneração Estática Incremental (ISR) são ótimas maneiras de obter desempenho para páginas cacheadas, mas acreditamos que podemos adicionar recursos para melhorar o desempenho da Renderização Dinâmica do Lado do Servidor (SSR) – especialmente quando a maioria, mas não todo o conteúdo, é cacheável. Estamos explorando maneiras de otimizar a renderização do servidor utilizando compilação e passes estáticos.

Compilador de Otimização do React

Apresentamos uma prévia inicial do React Forget na React Conf 2021. É um compilador que gera automaticamente o equivalente a chamadas useMemo e useCallback para minimizar o custo de re-renderização, mantendo o modelo de programação do React.

Recentemente, finalizamos uma reescrita do compilador para torná-lo mais confiável e capaz. Esta nova arquitetura nos permite analisar e memorizar padrões mais complexos, como o uso de mutações locais, e abre muitas novas oportunidades de otimização em tempo de compilação, além de apenas igualar os Hooks de memorização.

Também estamos trabalhando em um playground para explorar muitos aspectos do compilador. Embora o objetivo do playground seja facilitar o desenvolvimento do compilador, acreditamos que ele facilitará a experimentação e a construção de intuição sobre o que o compilador faz. Ele revela várias percepções sobre como ele funciona internamente e renderiza ao vivo as saídas do compilador conforme você digita. Isso será lançado junto com o compilador quando ele for liberado.

Offscreen

Hoje, se você quiser ocultar e mostrar um componente, você tem duas opções. Uma é adicioná-lo ou removê-lo completamente da árvore. O problema com essa abordagem é que o estado da sua UI é perdido toda vez que você desmonta, incluindo o estado armazenado no DOM, como a posição de rolagem.

A outra opção é manter o componente montado e alternar a aparência visualmente usando CSS. Isso preserva o estado da sua UI, mas tem um custo de desempenho, pois o React deve continuar renderizando o componente oculto e todos os seus filhos sempre que ele recebe novas atualizações.

Offscreen introduz uma terceira opção: ocultar a UI visualmente, mas despriorizar seu conteúdo. A ideia é semelhante em espírito à propriedade CSS content-visibility: quando o conteúdo está oculto, ele não precisa permanecer em sincronia com o resto da UI. O React pode adiar o trabalho de renderização até que o resto do aplicativo esteja ocioso, ou até que o conteúdo se torne visível novamente.

Offscreen é uma capacidade de baixo nível que desbloqueia recursos de alto nível. Semelhante a outros recursos concorrentes do React, como startTransition, na maioria dos casos você não interagirá diretamente com a API Offscreen, mas sim através de um framework opinativo para implementar padrões como:

• Transições instantâneas. Alguns frameworks de roteamento já pré-carregam dados para acelerar navegações subsequentes, como ao passar o mouse sobre um link. Com Offscreen, eles também poderão pré-renderizar a próxima tela em segundo plano.
• Estado reutilizável. Da mesma forma, ao navegar entre rotas ou abas, você pode usar Offscreen para preservar o estado da tela anterior para que possa voltar e continuar de onde parou.
• Renderização de lista virtualizada. Ao exibir listas grandes de itens, frameworks de lista virtualizada pré-renderizarão mais linhas do que as atualmente visíveis. Você pode usar Offscreen para pré-renderizar as linhas ocultas com menor prioridade do que os itens visíveis na lista.
• Conteúdo em segundo plano. Também estamos explorando um recurso relacionado para despriorizar conteúdo em segundo plano sem ocultá-lo, como ao exibir uma sobreposição modal.

Rastreamento de Transições

Atualmente, o React possui duas ferramentas de profiling. O Profiler original mostra uma visão geral de todos os commits em uma sessão de profiling. Para cada commit, ele também mostra todos os componentes que renderizaram e o tempo que levaram para renderizar. Também temos uma versão beta de um Profiler de Linha do Tempo introduzida no React 18 que mostra quando os componentes agendam atualizações e quando o React trabalha nessas atualizações. Ambos os profilers ajudam os desenvolvedores a identificar problemas de desempenho em seu código.

Percebemos que os desenvolvedores não acham muito útil saber sobre commits lentos individuais ou componentes fora de contexto. É mais útil saber o que realmente causa os commits lentos. E que os desenvolvedores querem ser capazes de rastrear interações específicas (por exemplo, um clique de botão, um carregamento inicial ou uma navegação de página) para observar regressões de desempenho e entender por que uma interação foi lenta e como corrigi-la.

Anteriormente, tentamos resolver esse problema criando uma API de Rastreamento de Interação, mas ela tinha algumas falhas de design fundamentais que reduziram a precisão do rastreamento de por que uma interação era lenta e, às vezes, resultavam em interações que nunca terminavam. Acabamos removendo essa API devido a esses problemas.

Estamos trabalhando em uma nova versão para a API de Rastreamento de Interação (provisoriamente chamada de Rastreamento de Transições, pois é iniciada via startTransition) que resolve esses problemas.

Nova Documentação do React

No ano passado, anunciamos a versão beta do novo site de documentação do React (lançado posteriormente como react.dev) do novo site de documentação do React. Os novos materiais de aprendizado ensinam Hooks primeiro e possuem novos diagramas, ilustrações, bem como muitos exemplos interativos e desafios. Fizemos uma pausa nesse trabalho para focar no lançamento do React 18, mas agora que o React 18 foi lançado, estamos trabalhando ativamente para finalizar e lançar a nova documentação.

Atualmente, estamos escrevendo uma seção detalhada sobre efeitos, pois ouvimos que este é um dos tópicos mais desafiadores tanto para usuários novos quanto experientes do React. Sincronizando com Efeitos é a primeira página publicada da série, e mais virão nas próximas semanas. Quando começamos a escrever uma seção detalhada sobre efeitos, percebemos que muitos padrões comuns de efeitos podem ser simplificados adicionando um novo primitivo ao React. Compartilhamos algumas ideias iniciais sobre isso no RFC do useEvent. Atualmente está em pesquisa inicial e ainda estamos iterando sobre a ideia. Agradecemos os comentários da comunidade sobre o RFC até agora, bem como o feedback e as contribuições para a reescrita contínua da documentação. Gostaríamos de agradecer especialmente a Harish Kumar por enviar e revisar muitas melhorias na implementação do novo site.

Obrigado a Sophie Alpert por revisar este post!