React 19.3 estabiliza View Transitions e Fragment refs

React 19.3 está disponível no npm desde 9 de setembro de 2026. A versão torna estáveis duas APIs apresentadas como experimentais no ano anterior: View Transitions e Fragment Refs. O texto explica como funcionam e lista outras mudanças notáveis.

View Transitions

O componente <ViewTransition> permite animar elementos ao entrar, sair, mover ou redimensionar usando a View Transition API do navegador. Para animar parte da interface, basta envolver o trecho no componente. Quando uma atualização marcada como Transition muda o estilo do filho ou monta/desmonta o ViewTransition, React anima a atualização e escolhe a animação conforme a mudança na árvore: enter quando o componente é adicionado, exit quando é removido, update quando os filhos mudam de estilo ou conteúdo, e share quando um ViewTransition nomeado é removido em um lugar e adicionado em outro. Atualizações não marcadas como Transitions não disparam animações, por serem urgentes e refletidas imediatamente. Atualizações de estado dentro de startTransition, uma revelação de Suspense ou uma atualização de useDeferredValue causam animação.

Por padrão, o componente usa um cross-fade suave. É possível customizar cada tipo de animação passando uma View Transition Class e definindo a animação em CSS, ou usar a Web Animations API com as props de evento onEnter, onExit, onShare e onUpdate. Hoje o recurso só funciona no DOM; a equipe diz trabalhar em suporte a React Native e outras plataformas.

A função addTransitionType permite diferenciar animações para a mesma atualização de estado - por exemplo, avançar um carrossel para o terceiro slide deve animar da direita para a esquerda, e voltar, no sentido oposto, mesmo que ambas as ações alterem o slide atual. Ela é chamada junto da atualização de estado para registrar a causa da transição, e os tipos podem escolher animações diferentes no ViewTransition. React também adiciona cada tipo ao elemento como view transition type do navegador, permitindo limitar animações em CSS com :active-view-transition-type(...).

Com Suspense, envolver um boundary em ViewTransition anima a passagem do fallback para o conteúdo final. O post recomenda usar animações com parcimônia e evitá-las para UI em cache que apareceria instantaneamente. Três princípios: fallbacks devem aparecer imediatamente, sem animação; o fallback deve mudar para o conteúdo final com animação; filhos que não suspendem devem aparecer imediatamente, sem animação. Também é possível usar ViewTransition para fazer imagens e fontes dispararem Suspense enquanto carregam, em vez de deixar que apareçam assim que terminarem de carregar.

Fragment Refs

Passar um ref diretamente para <Fragment> devolve um FragmentInstance, que opera sobre os filhos DOM como um grupo sem alterar a estrutura. A instância oferece addEventListener, removeEventListener e dispatchEvent para filhos de primeiro nível; focus, focusLast e blur para mover o foco entre filhos aninhados em profundidade; observeUsing e unobserveUsing para conectar IntersectionObserver ou ResizeObserver; e getClientRects, getRootNode, compareDocumentPosition e scrollIntoView para medir e rolar. A proposta resolve casos em que o componente renderiza um grupo de irmãos sem pai único ou não repassa a prop ref - situações em que adicionar um wrapper ou modificar um componente de biblioteca não é viável.

Optar por fora do SSR, Trusted Types e Context

O react-dom ganha browser(), API de primeira classe para um componente abrir mão da renderização no servidor. use(browser()) dispara Suspense no servidor, mas não no cliente: no SSR, o fallback do boundary mais próximo vai para o HTML, e na hidratação o componente segue normalmente. Como outras chamadas de use, pode ser usado em condicional ou depois de um return antecipado, permitindo optar por fora do SSR conforme uma condição, como o valor de uma prop.

React 19.3 também integra a Trusted Types API, recurso de segurança contra XSS baseado em DOM. Quando o site exige Trusted Types via Content-Security-Policy, o navegador exige objetos tipados em pontos de injeção como innerHTML. Antes, React convertia valores para string antes de passá-los às APIs do DOM, o que transformava objetos Trusted Types em strings rejeitadas; agora os valores passam sem coerção.

Em Server Components, <Context> pode ser importado de um módulo 'use client' e renderizado diretamente, sem o componente wrapper que antes era necessário. Server Components continuam sem poder criar Context.

O changelog lista ainda mudanças como renderizar Transitions independentes em vez de entrelaçá-las em um único render; dobrar a invocação de Effects em Strict Mode durante a hidratação; aviso para uso incorreto de use em condicional; renomeação de “form state” para “action state” em mensagens de erro de useActionState; novos eventos e propriedades no react-dom; e diversas correções de bugs.