React 19.2
1 de outubro de 2025 por The React Team
React 19.2 está disponível agora no npm!
Esta é nossa terceira versão no último ano, após o React 19 em dezembro e o React 19.1 em junho. Neste post, daremos uma visão geral das novas funcionalidades no React 19.2 e destacaremos algumas alterações notáveis.
Novos recursos do React
<Activity />
O componente <Activity> permite dividir seu aplicativo em “atividades” que podem ser controladas e priorizadas.
Você pode usar o Activity como alternativa para renderizar condicionalmente partes do seu aplicativo:
// Antes
{isVisible && <Page />}
// Depois
<Activity mode={isVisible ? 'visible' : 'hidden'}>
<Page />
</Activity>
No React 19.2, o Activity suporta dois modos: visible e hidden.
hidden: esconde os filhos, desmonta efeitos e adia todas as atualizações até que o React não tenha mais nada para fazer.visible: mostra os filhos, monta efeitos e permite que as atualizações sejam processadas normalmente.
Isso significa que você pode pré-renderizar e continuar renderizando partes ocultas do aplicativo sem impactar o desempenho de nada visível na tela.
Você pode usar o Activity para renderizar partes ocultas do aplicativo que um usuário provavelmente navegará a seguir, ou para salvar o estado de partes das quais o usuário se afasta. Isso ajuda a tornar as navegações mais rápidas carregando dados, CSS e imagens em segundo plano, e permite que as navegações de volta mantenham o estado, como campos de entrada.
No futuro, planejamos adicionar mais modos ao Activity para diferentes casos de uso.
Para exemplos de como usar o Activity, consulte a documentação do Activity.
useEffectEvent
Um padrão comum com useEffect é notificar o código do aplicativo sobre algum tipo de “eventos” de um sistema externo. Por exemplo, quando uma sala de bate-papo é conectada, você pode querer exibir uma notificação:
function ChatRoom({ roomId, theme }) {
useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.on('connected', () => {
showNotification('Conectado!', theme);
});
connection.connect();
return () => {
connection.disconnect()
};
}, [roomId, theme]);
// ...
}
O problema com o código acima é que uma alteração em qualquer valor usado dentro de um “evento” como esse fará com que o Effect circundante seja reexecutado. Por exemplo, alterar o theme fará com que a sala de bate-papo se reconecte. Isso faz sentido para valores relacionados à lógica do Effect em si, como roomId, mas não faz sentido para theme.
Para resolver isso, a maioria dos usuários simplesmente desativa a regra de lint e exclui a dependência. Mas isso pode levar a bugs, pois o linter não pode mais ajudá-lo a manter as dependências atualizadas se você precisar atualizar o Effect mais tarde.
Com useEffectEvent, você pode separar a parte “evento” dessa lógica do Effect que a emite:
function ChatRoom({ roomId, theme }) {
const onConnected = useEffectEvent(() => {
showNotification('Conectado!', theme);
});
useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.on('connected', () => {
onConnected();
});
connection.connect();
return () => connection.disconnect();
}, [roomId]);
// ✅ Todas as dependências declaradas (Eventos de Efeito não são dependências)
// ...
}
Assim como eventos DOM, os Eventos de Efeito sempre “veem” as últimas props e estado.
Eventos de Efeito não devem ser declarados no array de dependências. Você precisará atualizar para eslint-plugin-react-hooks@6.1.1 para que o linter não tente inseri-los como dependências. Observe que os Eventos de Efeito só podem ser declarados no mesmo componente ou Hook que o “seu” Effect. Essas restrições são verificadas pelo linter.
Nota
Quando usar useEffectEvent
Você deve usar useEffectEvent para funções que são conceitualmente “eventos” que acontecem de serem disparados a partir de um Effect em vez de um evento do usuário (é isso que o torna um “Evento de Efeito”). Você não precisa envolver tudo em useEffectEvent, ou usá-lo apenas para silenciar o erro do lint, pois isso pode levar a bugs.
Para um mergulho profundo em como pensar sobre Eventos de Efeito, consulte: Separando Eventos de Efeitos.
cacheSignal
Componentes do Servidor React
O cacheSignal é apenas para uso com React Server Components.
O cacheSignal permite que você saiba quando a vida útil do cache() acabou:
import { cache, cacheSignal } from 'react';
const dedupedFetch = cache(fetch);
async function Component() {
await dedupedFetch(url, { signal: cacheSignal() });
}
```Isso permite que você limpe ou interrompa o trabalho quando o resultado não será mais usado no cache, como:
* O React concluiu com sucesso o renderização
* O render foi interrompido
* O render falhou
Para mais informações, consulte a documentação [`cacheSignal`](https://react.dev/reference/react/cacheSignal).
---
### Rastreamento de Desempenho
O React 19.2 adiciona um novo conjunto de [tracks personalizados](https://developer.chrome.com/docs/devtools/performance/extension) aos perfis de desempenho do Chrome DevTools para fornecer mais informações sobre o desempenho do seu aplicativo React:
A documentação [React Performance Tracks](https://react.dev/reference/dev-tools/react-performance-tracks) explica tudo o que está incluído nos tracks, mas aqui está uma visão geral de alto nível.
#### Agendador ⚛
A track do Agendador mostra no que o React está trabalhando para diferentes prioridades, como "bloqueante" para interações do usuário ou "transição" para atualizações dentro de startTransition. Dentro de cada track, você verá o tipo de trabalho sendo realizado, como o evento que agendou uma atualização e quando a renderização para essa atualização aconteceu.
Também mostramos informações como quando uma atualização está bloqueada esperando por uma prioridade diferente ou quando o React está esperando pela pintura antes de continuar. A track do Agendador ajuda você a entender como o React divide seu código em diferentes prioridades e a ordem em que o trabalho foi concluído.
Consulte a documentação da [track do Agendador](https://react.dev/reference/dev-tools/react-performance-tracks#scheduler) para ver tudo o que está incluído.
#### Componentes ⚛
A track de Componentes mostra a árvore de componentes com os quais o React está trabalhando, seja para renderizar ou executar efeitos. Dentro dela, você verá rótulos como "Montagem" para quando as crianças são montadas ou os efeitos são montados, ou "Bloqueado" para quando a renderização é bloqueada devido à concessão de trabalho fora do React.
A track de Componentes ajuda você a entender quando os componentes são renderizados ou executam efeitos e o tempo que leva para concluir esse trabalho, ajudando a identificar problemas de desempenho.
Consulte a documentação da [track de Componentes](https://react.dev/reference/dev-tools/react-performance-tracks#components) para ver tudo o que está incluído.
---
## Novas Funcionalidades do React DOM
### Pré-renderização Parcial
Na versão 19.2, estamos adicionando uma nova capacidade de pré-renderizar parte do aplicativo com antecedência e retomar a renderização posteriormente.
Essa funcionalidade é chamada de "Pré-renderização Parcial" e permite que você pré-renderize as partes estáticas do seu aplicativo e as sirva a partir de um CDN, e depois retome a renderização do shell para preenchê-lo com conteúdo dinâmico posteriormente.
Para pré-renderizar um aplicativo para retomar posteriormente, primeiro chame `prerender` com um `AbortController`:
```javascript
const {prelude, postponed} = await prerender(
``````jsx
<App />,
{ signal: controller.signal, });
// Salve o estado adiado para mais tarde
await savePostponedState(postponed);
// Envie o prelúdio para o cliente ou CDN.
Em seguida, você pode retornar o shell prelude para o cliente e, posteriormente, chamar resume para “retomar” um fluxo de SSR:
const postponed = await getPostponedState(request);
const resumeStream = await resume(<App />, postponed);
// Envie o fluxo para o cliente.
Ou você pode chamar resumeAndPrerender para retomar e obter HTML estático para SSG:
const postponedState = await getPostponedState(request);
const { prelude } = await resumeAndPrerender(<App />, postponedState);
// Envie o HTML completo para o CDN.
Para mais informações, consulte a documentação das novas APIs:
react-dom/serverresume: para Web Streams.resumeToPipeableStreampara Node Streams.
react-dom/staticresumeAndPrerenderpara Web Streams.resumeAndPrerenderToNodeStreampara Node Streams.
Além disso, as APIs de pré-renderização agora retornam um estado postpone para passar para as APIs resume.
Alterações Notáveis
Agrupamento de Fronteiras de Suspense para SSR
Corrigimos um bug comportamental em que as fronteiras de Suspense seriam reveladas de forma diferente dependendo se fossem renderizadas no cliente ou durante o streaming de renderização no lado do servidor.
A partir da versão 19.2, o React agrupará as revelações das fronteiras de Suspense renderizadas no servidor por um curto período, permitindo que mais conteúdo seja revelado juntos e alinhado com o comportamento de renderização no cliente.
Anteriormente, durante a renderização de streaming do lado do servidor, o conteúdo de suspense substituía imediatamente os fallbacks.
No React 19.2, as fronteiras de suspense são agrupadas por um pequeno período de tempo, permitindo revelar mais conteúdo juntas.
Esta correção também prepara os aplicativos para suportar <ViewTransition> para Suspense durante o SSR. Ao revelar mais conteúdo juntas, as animações podem ser executadas em lotes maiores de conteúdo e evitar a cadeia de animações de conteúdo que são transmitidas próximas umas das outras.
Nota
O React usa heurísticas para garantir que o throttling não afete os principais indicadores de desempenho da web e o ranking de busca.
Por exemplo, se o tempo total de carregamento da página estiver se aproximando de 2,5s (que é o tempo considerado “bom” para LCP), o React parará de agrupar e revelará o conteúdo imediatamente para que o throttling não seja a razão para perder a métrica.
SSR: Suporte a Web Streams para Node
O React 19.2 adiciona suporte para Web Streams para streaming SSR no Node.js:
renderToReadableStreamagora está disponível para Node.jsprerenderagora está disponível para Node.js
Além das novas APIs resume:
resumeestá disponível para Node.js.resumeAndPrerenderestá disponível para Node.js.
Armadilha
Prefira Node Streams para renderização do lado do servidor no Node.js
Em ambientes Node.js, ainda recomendamos fortemente o uso das APIs Node Streams:
Isso ocorre porque os Node Streams são muito mais rápidos que os Web Streams no Node, e os Web Streams não suportam compressão por padrão, levando os usuários a perder acidentalmente os benefícios do streaming.
eslint-plugin-react-hooks v6
Também publicamos eslint-plugin-react-hooks@6.1.1 com configuração plana por padrão no preset recommended, e opção para regras novas alimentadas pelo React Compiler.
Para continuar usando a configuração legado, você pode alterar para recommended-legacy:
- extends: ['plugin:react-hooks/recommended']
+ extends: ['plugin:react-hooks/recommended-legacy']
Para uma lista completa de regras habilitadas pelo compilador, consulte a documentação do linter.
Consulte o changelog do eslint-plugin-react-hooks para uma lista completa de alterações.
Atualize o prefixo padrão useId
No 19.2, estamos atualizando o prefixo padrão useId de :r: (19.0.0) ou «r» (19.1.0) para _r_.
A intenção original de usar um caractere especial que não era válido para seletores CSS era que seria improvável colidir com IDs escritas por usuários. No entanto, para suportar View Transitions, precisamos garantir que os IDs gerados por useId sejam válidos para view-transition-name e nomes XML 1.0.
Changelog
Outras alterações notáveis
react-dom: Permitir que nonce seja usado em estilos hoistable #32461react-dom: Avisar sobre o uso de um nó pertencente ao React como um Container se também tiver conteúdo de texto #32774
Correções de bugs notáveis
react: Serializar contexto como “SomeContext” em vez de “SomeContext.Provider” #33507react: Corrigir loop infinito de useDeferredValue no evento popstate #32821react: Corrigir um bug quando um valor inicial foi passado para useDeferredValue #34376react: Corrigir uma falha ao enviar formulários com Client Actions #33055react: Esconder/revelar o conteúdo de fronteiras de suspense desidratadas se elas ressuspenderem #32900react: Evitar estouro de pilha em árvores largas durante Hot Reload #34145react: Melhorar pilhas de componentes em vários lugares #33629, #33724, #32735, #33723react: Corrigir um bug com React.use dentro de um Component React.lazy-ed #33941react-dom: Parar de avisar quando atributos ARIA 1.3 são usados #34264react-dom: Corrigir um bug com Suspense profundamente aninhado dentro de fallbacks de Suspense #33467react-dom: Evitar travamento ao suspender após abortar durante a renderização #34192
Para uma lista completa de alterações, consulte o Changelog.