Duas mudanças importantes no React: View Transitions e Activity

• O React revelou novos recursos experimentais
  • View Transitions permite aplicar animações suaves de transição entre páginas com facilidade
  • Activity possibilita otimização de desempenho ao ocultar a UI e preservar o estado
• Além disso, vários recursos estão em desenvolvimento, como tratamento automático de dependências, Fragment Refs e Concurrent Stores

Principais características de View Transitions

• Implementa animações usando a nova API do navegador startViewTransition
• Com <ViewTransition>, é possível indicar quais elementos devem ser animados, e usar startTransition, useDeferredValue, Suspense etc. como gatilhos
• Por padrão, fornece animação de crossfade, com possibilidade de personalização via CSS
• Também oferece suporte a shared element transitions, permitindo movimento natural entre elementos com o mesmo atributo name
• Fornece a API addTransitionType, que permite definir animações diferentes conforme a causa da transição

Principais características de Activity

• Com <Activity>, é possível ocultar a UI e manter o estado, ou fazer pré-renderização quando necessário
• No modo oculto, o componente é desmontado, mas o estado é preservado, e a prioridade de renderização é reduzida
• Ao mudar de página, é possível restaurar campos de entrada e estado sem perdê-los
• No futuro, também devem ser adicionados um modo para modais e um recurso de remoção de estado para economizar memória
• No renderização no lado do servidor (SSR), o Activity também oferece suporte a comportamentos de otimização

Outros recursos em desenvolvimento

• React Performance Tracks

  • Está em desenvolvimento um recurso para adicionar trilhas personalizadas do React ao profiler de desempenho do navegador
  • Ainda estão resolvendo problemas de desempenho e de integração com o Suspense

• Tratamento automático de dependências de Effect (Automatic Effect Dependencies)

  • O objetivo é usar o compilador do React para inserir automaticamente dependências em useEffect, melhorando a concisão e a compreensão do código
  • A ideia é incentivar uma forma de pensar centrada em Effects, e não no ciclo de vida do componente

• Compiler IDE Extension

  • Está em desenvolvimento uma extensão de IDE baseada no React Compiler
  • Ela deverá oferecer vários recursos, como otimização de código, detecção de violações de regras e exibição de dependências inseridas automaticamente

• Fragment Refs

  • Está em pesquisa o recurso de Fragment Ref, que permitiria gerenciar vários elementos DOM com um único Ref
  • O objetivo é facilitar chamadas à API do DOM

• Gesture Animations

  • Também está em andamento uma pesquisa para expandir View Transition para animações baseadas em gestos de toque
  • Estão resolvendo problemas como movimento contínuo, tratamento de ações não concluídas e inversão entre o DOM novo e o DOM existente

• Concurrent Stores

  • O objetivo é integrar stores externos ao React de forma natural no modo concorrente (Concurrent)
  • Está em desenvolvimento uma nova API no estilo use(store) para superar as limitações de useSyncExternalStore