React 19.2 e além: dominando Activity e useEffectEvent hoje

Rocketseat

3 min de leitura

Conheça o Rocketseat Para Empresas

Oferecemos soluções personalizadas para empresas de todos os portes.

Fala, Dev! 💜

O ecossistema React não para. Com as atualizações recentes do React 19.2, novas primitivas que antes eram apenas "teoria de laboratório" começam a ganhar forma e utilidade real no nosso dia a dia.

Hoje vamos desmistificar duas APIs que prometem resolver dores antigas de arquitetura e performance: o componente <Activity> (anteriormente conhecido como Offscreen) e o hook useEffectEvent.

Se você quer sair na frente e entender como arquitetar as aplicações do futuro, cola aqui.

Activity: o "Alt-Tab" dos componentes

Quantas vezes você precisou "esconder" um componente pesado (como uma lista de pedidos, um mapa ou um dashboard) sem desmontá-lo?

Atualmente, temos um dilema:

Se desmontar (renderizar null): O estado é perdido e, ao voltar, o React precisa remontar tudo e refazer o fetch de dados.

Se ocultar (CSS display: none): O componente continua na árvore, consumindo memória e processamento (CPU) com atualizações de estado invisíveis.

A API Activity resolve isso permitindo que o React "adormeça" uma parte da árvore.

Como funciona na prática?

Você envolve seu componente sensível em um <Activity> e controla a propriedade mode.

Quando o mode é "hidden", o React mantém o estado em memória (preservando o que o usuário digitou ou scrollou), mas pausa a renderização de atualizações de baixa prioridade. É como a aba do seu navegador: o site está lá, pronto, mas não gasta recursos enquanto você não olha para ele.

useEffectEvent: o fim da "gambiarra" no array de dependências

Todo dev React já passou por isso: você precisa usar uma variável dentro do useEffect (como um tema ou uma função de log), mas não quer que o efeito rode novamente se essa variável mudar.

Hoje, a solução oficial é o useEffectEvent. Ele separa o que é Reativo (deve disparar o efeito) do que é Não-Reativo (apenas lido pelo efeito).

O cenário do problema

Imagine um chat que conecta quando a roomId muda. Mas você quer logar o tema atual (dark/light) na conexão.


// O PESADELO DO LINTER
useEffect(() => {
  const connection = createConnection(roomId);
  connection.connect();
  
  // Se eu colocar 'theme' na dependência, o chat reconecta à toa!
  logAnalytics('connected', theme); 

  return () => connection.disconnect();
}, [roomId, theme]); // <--- O 'theme' quebra a lógica

A solução elegante

Com useEffectEvent, encapsulamos a lógica não-reativa. O React garante que essa função tenha sempre o valor mais recente, sem precisar reiniciar o efeito.


// A SOLUÇÃO COM REACT 19+
const onConnected = useEffectEvent(() => {
  logAnalytics('connected', theme); // Lê o tema atual sem quebrar o efeito
});

useEffect(() => {
  const connection = createConnection(roomId);
  connection.connect();
  
  onConnected(); // Chama a função estável

  return () => connection.disconnect();
}, [roomId]); // <--- Limpo! Só reconecta se a sala mudar.

Veja na prática (Mão na massa)

Falar é fácil, mas ver o código rodando esclarece tudo.

No vídeo abaixo, analisamos as atualizações do React 19.2 e mostramos como o <Activity> evita layout shifts em listas de e-commerce e como o useEffectEvent limpa o código.

Dá o play e veja a mágica acontecer:

O mercado exige profundidade

Você percebeu no vídeo como o ecossistema está evoluindo rápido? Essas features não são apenas "açúcar sintático", elas mudam a forma como pensamos a arquitetura do Front-end.

O mercado não procura mais quem apenas sabe criar componentes simples; ele busca especialistas capazes de orquestrar performance e UX usando essas novas ferramentas.

Não espere essas tecnologias se tornarem obrigatórias para começar a estudar.

Na Formação React da Rocketseat, você vai muito além da sintaxe. Você aprende a construir aplicações robustas, dominar o ecossistema (Next.js, Tailwind, Hooks Avançados) e se preparar para os desafios reais das grandes empresas.

Pare de apenas "copiar código" e comece a "criar soluções".

👉 Conheça a Formação React e leve sua carreira para o próximo nível

Never Stop Learning! 🚀

Fala, Dev! 💜

Hoje vamos desmistificar duas APIs que prometem resolver dores antigas de arquitetura e performance: o componente <Activity> (anteriormente conhecido como Offscreen) e o hook useEffectEvent.

Se você quer sair na frente e entender como arquitetar as aplicações do futuro, cola aqui.

Activity: o "Alt-Tab" dos componentes

Quantas vezes você precisou "esconder" um componente pesado (como uma lista de pedidos, um mapa ou um dashboard) sem desmontá-lo?

Atualmente, temos um dilema:

Se desmontar (renderizar null): O estado é perdido e, ao voltar, o React precisa remontar tudo e refazer o fetch de dados.

Se ocultar (CSS display: none): O componente continua na árvore, consumindo memória e processamento (CPU) com atualizações de estado invisíveis.

A API Activity resolve isso permitindo que o React "adormeça" uma parte da árvore.

Como funciona na prática?

Você envolve seu componente sensível em um <Activity> e controla a propriedade mode.

useEffectEvent: o fim da "gambiarra" no array de dependências

Hoje, a solução oficial é o useEffectEvent. Ele separa o que é Reativo (deve disparar o efeito) do que é Não-Reativo (apenas lido pelo efeito).

O cenário do problema

Imagine um chat que conecta quando a roomId muda. Mas você quer logar o tema atual (dark/light) na conexão.


// O PESADELO DO LINTER
useEffect(() => {
  const connection = createConnection(roomId);
  connection.connect();
  
  // Se eu colocar 'theme' na dependência, o chat reconecta à toa!
  logAnalytics('connected', theme); 

  return () => connection.disconnect();
}, [roomId, theme]); // <--- O 'theme' quebra a lógica

A solução elegante

Com useEffectEvent, encapsulamos a lógica não-reativa. O React garante que essa função tenha sempre o valor mais recente, sem precisar reiniciar o efeito.


// A SOLUÇÃO COM REACT 19+
const onConnected = useEffectEvent(() => {
  logAnalytics('connected', theme); // Lê o tema atual sem quebrar o efeito
});

useEffect(() => {
  const connection = createConnection(roomId);
  connection.connect();
  
  onConnected(); // Chama a função estável

  return () => connection.disconnect();
}, [roomId]); // <--- Limpo! Só reconecta se a sala mudar.

Veja na prática (Mão na massa)

Falar é fácil, mas ver o código rodando esclarece tudo.

No vídeo abaixo, analisamos as atualizações do React 19.2 e mostramos como o <Activity> evita layout shifts em listas de e-commerce e como o useEffectEvent limpa o código.

Dá o play e veja a mágica acontecer:

O mercado exige profundidade

Você percebeu no vídeo como o ecossistema está evoluindo rápido? Essas features não são apenas "açúcar sintático", elas mudam a forma como pensamos a arquitetura do Front-end.

O mercado não procura mais quem apenas sabe criar componentes simples; ele busca especialistas capazes de orquestrar performance e UX usando essas novas ferramentas.

Não espere essas tecnologias se tornarem obrigatórias para começar a estudar.

Pare de apenas "copiar código" e comece a "criar soluções".

👉 Conheça a Formação React e leve sua carreira para o próximo nível

Never Stop Learning! 🚀

Fala, Dev! 💜

Hoje vamos desmistificar duas APIs que prometem resolver dores antigas de arquitetura e performance: o componente <Activity> (anteriormente conhecido como Offscreen) e o hook useEffectEvent.

Se você quer sair na frente e entender como arquitetar as aplicações do futuro, cola aqui.

Activity: o "Alt-Tab" dos componentes

Quantas vezes você precisou "esconder" um componente pesado (como uma lista de pedidos, um mapa ou um dashboard) sem desmontá-lo?

Atualmente, temos um dilema:

Se desmontar (renderizar null): O estado é perdido e, ao voltar, o React precisa remontar tudo e refazer o fetch de dados.

Se ocultar (CSS display: none): O componente continua na árvore, consumindo memória e processamento (CPU) com atualizações de estado invisíveis.

A API Activity resolve isso permitindo que o React "adormeça" uma parte da árvore.

Como funciona na prática?

Você envolve seu componente sensível em um <Activity> e controla a propriedade mode.

useEffectEvent: o fim da "gambiarra" no array de dependências

Hoje, a solução oficial é o useEffectEvent. Ele separa o que é Reativo (deve disparar o efeito) do que é Não-Reativo (apenas lido pelo efeito).

O cenário do problema

Imagine um chat que conecta quando a roomId muda. Mas você quer logar o tema atual (dark/light) na conexão.


// O PESADELO DO LINTER
useEffect(() => {
  const connection = createConnection(roomId);
  connection.connect();
  
  // Se eu colocar 'theme' na dependência, o chat reconecta à toa!
  logAnalytics('connected', theme); 

  return () => connection.disconnect();
}, [roomId, theme]); // <--- O 'theme' quebra a lógica

A solução elegante

Com useEffectEvent, encapsulamos a lógica não-reativa. O React garante que essa função tenha sempre o valor mais recente, sem precisar reiniciar o efeito.


// A SOLUÇÃO COM REACT 19+
const onConnected = useEffectEvent(() => {
  logAnalytics('connected', theme); // Lê o tema atual sem quebrar o efeito
});

useEffect(() => {
  const connection = createConnection(roomId);
  connection.connect();
  
  onConnected(); // Chama a função estável

  return () => connection.disconnect();
}, [roomId]); // <--- Limpo! Só reconecta se a sala mudar.

Veja na prática (Mão na massa)

Falar é fácil, mas ver o código rodando esclarece tudo.

No vídeo abaixo, analisamos as atualizações do React 19.2 e mostramos como o <Activity> evita layout shifts em listas de e-commerce e como o useEffectEvent limpa o código.

Dá o play e veja a mágica acontecer:

O mercado exige profundidade

Você percebeu no vídeo como o ecossistema está evoluindo rápido? Essas features não são apenas "açúcar sintático", elas mudam a forma como pensamos a arquitetura do Front-end.

O mercado não procura mais quem apenas sabe criar componentes simples; ele busca especialistas capazes de orquestrar performance e UX usando essas novas ferramentas.

Não espere essas tecnologias se tornarem obrigatórias para começar a estudar.

Pare de apenas "copiar código" e comece a "criar soluções".

👉 Conheça a Formação React e leve sua carreira para o próximo nível

Never Stop Learning! 🚀

Conheça o Rocketseat Para Empresas

Oferecemos soluções personalizadas para empresas de todos os portes.

Rocketseat

Ecossistema de educação contínua referência em programação e Inteligência Artificial.

Artigos_

Explore conteúdos relacionados

Descubra mais artigos que complementam seu aprendizado e expandem seu conhecimento.

NewsletterReceba conteúdos inéditos e novidades gratuitamente