React 19.2: Todas as Novidades do Terceiro Major Release de 2025

Ola HaWkers, o React 19.2 chegou em outubro de 2025, marcando o terceiro lancamento significativo no ultimo ano apos o React 19 em dezembro de 2024 e o React 19.1 em junho de 2025.

Voce ja atualizou seus projetos? Vamos explorar as novas features que prometem mudar como construimos aplicacoes React.

Visao Geral do React 19.2

O React 19.2 continua a evolucao da arquitetura async-first introduzida no React 19, trazendo novas primitivas para controle de renderizacao e performance.

Principais Adicoes

• Activity component - Nova primitiva para organizar partes da aplicacao
• useEffectEvent - Hook para eventos dentro de effects
• cacheSignal - Controle de cache para Server Components
• Performance Tracks - Nova ferramenta de profiling
• Partial Pre-rendering - Pre-renderizacao parcial da aplicacao

Activity Component

O Activity e uma nova primitiva que permite dividir sua aplicacao em "atividades" que podem ser controladas e priorizadas.

Conceito Basico

import { Activity } from 'react';

function App() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <div>
      <TabBar activeTab={activeTab} onChange={setActiveTab} />

      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
        <HomePage />
      </Activity>

      <Activity mode={activeTab === 'profile' ? 'visible' : 'hidden'}>
        <ProfilePage />
      </Activity>

      <Activity mode={activeTab === 'settings' ? 'visible' : 'hidden'}>
        <SettingsPage />
      </Activity>
    </div>
  );
}

Modos de Activity

// visible - Renderiza e mostra normalmente
<Activity mode="visible">
  <Content />
</Activity>

// hidden - Mantém estado mas esconde do DOM
<Activity mode="hidden">
  <Content />
</Activity>

// Transições suaves entre estados
function TabContent({ isActive, children }) {
  return (
    <Activity mode={isActive ? 'visible' : 'hidden'}>
      {children}
    </Activity>
  );
}

Beneficios do Activity

1. Preservacao de estado:
Diferente de renderizacao condicional, Activity preserva todo o estado do componente quando escondido.

// Problema: Estado perdido ao trocar tabs
function OldApproach({ activeTab }) {
  return (
    <>
      {activeTab === 'form' && <FormWithState />} {/* Estado resetado */}
    </>
  );
}

// Solucao: Activity preserva estado
function NewApproach({ activeTab }) {
  return (
    <Activity mode={activeTab === 'form' ? 'visible' : 'hidden'}>
      <FormWithState /> {/* Estado mantido */}
    </Activity>
  );
}

2. Priorizacao de renderizacao:
React pode priorizar activities visiveis sobre escondidas.

// Activities visiveis tem prioridade
<Activity mode="visible" priority="high">
  <CriticalContent />
</Activity>

<Activity mode="hidden" priority="low">
  <PreloadedContent />
</Activity>

useEffectEvent

O novo hook useEffectEvent resolve um problema classico: usar valores atuais dentro de effects sem causar re-execucao.

O Problema

// Problema: Effect re-executa sempre que onMessage muda
function Chat({ onMessage }) {
  useEffect(() => {
    const connection = connect();
    connection.on('message', (msg) => {
      onMessage(msg); // onMessage é nova referencia a cada render
    });
    return () => connection.disconnect();
  }, [onMessage]); // Re-conecta a cada render!
}

A Solucao

import { useEffectEvent } from 'react';

function Chat({ onMessage }) {
  // Cria referencia estavel ao callback
  const onMessageEvent = useEffectEvent(onMessage);

  useEffect(() => {
    const connection = connect();
    connection.on('message', (msg) => {
      onMessageEvent(msg); // Sempre usa versao mais recente
    });
    return () => connection.disconnect();
  }, []); // Sem dependencias, nao re-conecta!
}

Casos de Uso Praticos

// Logging com valores atuais
function ProductPage({ productId, analytics }) {
  const logVisit = useEffectEvent(() => {
    analytics.logVisit(productId); // Sempre usa productId atual
  });

  useEffect(() => {
    logVisit();
  }, []);

  return <Product id={productId} />;
}

// Timer com callback atualizado
function Timer({ onTick }) {
  const handleTick = useEffectEvent(onTick);

  useEffect(() => {
    const id = setInterval(() => {
      handleTick();
    }, 1000);
    return () => clearInterval(id);
  }, []);
}

cacheSignal

O cacheSignal oferece controle fino sobre o cache de Server Components.

Uso Basico

import { cacheSignal } from 'react';

async function ProductList() {
  // Sinal para invalidacao de cache
  const signal = cacheSignal();

  const products = await fetchProducts({ signal });

  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

Invalidacao Manual

// Server Action para invalidar cache
'use server';

import { invalidateCache } from 'react';

export async function updateProduct(id, data) {
  await db.products.update(id, data);

  // Invalida cache de componentes que usam esse sinal
  invalidateCache('products');
}

Partial Pre-rendering

A feature mais impactante do React 19.2 e o Partial Pre-rendering, que permite pre-renderizar partes estaticas da aplicacao.

Como Funciona

// Layout estatico pre-renderizado
function Layout({ children }) {
  return (
    <html>
      <head>
        <title>Meu App</title>
      </head>
      <body>
        <Header /> {/* Estatico - pre-renderizado */}
        <Sidebar /> {/* Estatico - pre-renderizado */}

        <Suspense fallback={<Loading />}>
          {children} {/* Dinamico - renderizado depois */}
        </Suspense>

        <Footer /> {/* Estatico - pre-renderizado */}
      </body>
    </html>
  );
}

Beneficios de Performance

Fluxo tradicional:

1. Request chega
2. Servidor renderiza tudo
3. Envia HTML completo
4. Usuario ve conteudo

Com Partial Pre-rendering:

1. Request chega
2. Servidor envia shell pre-renderizado imediatamente
3. Usuario ve estrutura instantaneamente
4. Conteudo dinamico carrega progressivamente

// Definindo partes estaticas vs dinamicas
export default function Page() {
  return (
    <>
      {/* Estas partes vem do CDN instantaneamente */}
      <Navigation />
      <Hero />

      {/* Esta parte e renderizada sob demanda */}
      <Suspense fallback={<ProductSkeleton />}>
        <ProductRecommendations />
      </Suspense>

      {/* Estatico novamente */}
      <Footer />
    </>
  );
}

Performance Tracks

Nova ferramenta para profiling detalhado de performance.

Integracao com DevTools

import { startTrack, endTrack } from 'react';

function ExpensiveComponent() {
  startTrack('ExpensiveComponent:render');

  const result = expensiveCalculation();

  endTrack('ExpensiveComponent:render');

  return <div>{result}</div>;
}

Visualizacao no React DevTools

O Profiler agora mostra:

• Tempo de renderizacao por track
• Cascata de dependencias
• Impacto de Server Components vs Client Components
• Metricas de cache hit/miss

Melhorias do React Compiler

O React Compiler introduzido no React 19 recebeu melhorias significativas.

Memoizacao Automatica Aprimorada

// React Compiler agora otimiza automaticamente
function ProductCard({ product, onAddToCart }) {
  // Antes: Precisava de useMemo/useCallback
  // Agora: Compiler otimiza automaticamente

  const formattedPrice = formatCurrency(product.price);
  const handleClick = () => onAddToCart(product.id);

  return (
    <div onClick={handleClick}>
      <h3>{product.name}</h3>
      <p>{formattedPrice}</p>
    </div>
  );
}

Migracao Para React 19.2

Atualizando Dependencias

npm install react@19.2.0 react-dom@19.2.0

Verificando Compatibilidade

// Verificar versao
import { version } from 'react';
console.log(version); // "19.2.0"

// Verificar se Activity esta disponivel
const hasActivity = typeof Activity !== 'undefined';

Habilitando Novas Features

// next.config.js (para Next.js)
module.exports = {
  experimental: {
    ppr: true, // Partial Pre-rendering
    reactCompiler: true,
  },
};

Comparacao de Versoes

Feature	React 19	React 19.1	React 19.2
Server Components	Estavel	Estavel	Estavel
Actions API	Novo	Aprimorado	Aprimorado
use() API	Novo	Estavel	Estavel
Compiler	Beta	Estavel	Aprimorado
Activity	-	-	Novo
useEffectEvent	-	-	Novo
Partial Pre-rendering	-	Experimental	Estavel

Melhores Praticas

Quando Usar Activity

// BOM: Tabs com estado complexo
<Activity mode={activeTab === 'editor' ? 'visible' : 'hidden'}>
  <CodeEditor />
</Activity>

// BOM: Modais que preservam estado
<Activity mode={isModalOpen ? 'visible' : 'hidden'}>
  <Modal>
    <ComplexForm />
  </Modal>
</Activity>

// EVITAR: Conteudo simples sem estado
// Use renderizacao condicional normal
{showContent && <SimpleContent />}

Quando Usar useEffectEvent

// BOM: Callbacks em effects de longa duracao
const handleMessage = useEffectEvent(onMessage);

// BOM: Analytics e logging
const logEvent = useEffectEvent((event) => analytics.log(event));

// EVITAR: Substituir useCallback para handlers de eventos normais
// useCallback ainda e apropriado para props de componentes

Conclusao

O React 19.2 continua a evolucao do React em direcao a uma arquitetura mais eficiente e flexivel. Activity e useEffectEvent resolvem problemas reais de desenvolvimento, enquanto Partial Pre-rendering oferece ganhos significativos de performance.

A recomendacao e comecar experimentando essas features em projetos novos ou partes isoladas de projetos existentes antes de uma migracao completa.

Se voce quer aprofundar seus conhecimentos em React e JavaScript moderno, recomendo que de uma olhada em outro artigo: ECMAScript 2025: Todas as Novas Features onde voce vai descobrir as novidades do JavaScript que complementam o React 19.2.

Bora pra cima! 🦅

🎯 Junte-se aos Desenvolvedores que Estao Evoluindo

Milhares de desenvolvedores ja usam nosso material para acelerar seus estudos e conquistar melhores posicoes no mercado.

Por que investir em conhecimento estruturado?

Aprender de forma organizada e com exemplos praticos faz toda diferenca na sua jornada como desenvolvedor.

Comece agora:

• 1x de R$9,90 no cartao
• ou R$9,90 a vista

🚀 Acessar Guia Completo

"Material excelente para quem quer se aprofundar!" - Joao, Desenvolvedor