React 19.2

1 de octubre de 2025 por El equipo de React

Este es nuestro tercer lanzamiento en el último año, después de React 19 en diciembre y React 19.1 en junio. En esta publicación, daremos una visión general de las nuevas características de React 19.2 y destacaremos algunos cambios notables.

• Nuevas características de React
  • <Activity />
  • useEffectEvent
  • cacheSignal
  • Performance Tracks
• Nuevas características de React DOM
  • Prerenderizado parcial
• Cambios notables
  • Agrupación de límites de Suspense para SSR
  • SSR: Soporte de Web Streams para Node
  • eslint-plugin-react-hooks v6
  • Actualización del prefijo por defecto de useId
• Registro de cambios

Nuevas características de React

<Activity />

<Activity> te permite dividir tu aplicación en “actividades” que pueden ser controladas y priorizadas.

Puedes usar Activity como una alternativa a renderizar condicionalmente partes de tu aplicación:

// Antes
{isVisible && <Page />}

// Después
<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <Page />
</Activity>

En React 19.2, Activity soporta dos modos: visible y hidden.

• hidden: oculta los hijos, desmonta los efectos y difiere todas las actualizaciones hasta que React no tenga más trabajo pendiente.
• visible: muestra los hijos, monta los efectos y permite que las actualizaciones se procesen normalmente.

Esto significa que puedes prerenderizar y mantener renderizadas partes ocultas de la app sin afectar el rendimiento de lo que está visible en pantalla.

Puedes usar Activity para renderizar partes ocultas de la app a las que es probable que el usuario navegue a continuación, o para guardar el estado de partes de las que el usuario se aleja. Esto ayuda a que las navegaciones sean más rápidas cargando datos, CSS e imágenes en segundo plano, y permite que las navegaciones hacia atrás mantengan el estado, como los campos de entrada.

En el futuro, planeamos agregar más modos a Activity para diferentes casos de uso.

Para ejemplos de cómo usar Activity, consulta la documentación de Activity.

useEffectEvent

Un patrón común con useEffect es notificar al código de la app sobre algún tipo de “evento” de un sistema externo. Por ejemplo, cuando una sala de chat se conecta, podrías querer mostrar una notificación:

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('¡Conectado!', theme);
    });
    connection.connect();
    return () => {
      connection.disconnect()
    };
  }, [roomId, theme]);
  // ...

El problema con el código anterior es que un cambio en cualquier valor usado dentro de ese “evento” hará que el Effect circundante se vuelva a ejecutar. Por ejemplo, cambiar el theme hará que la sala de chat se reconecte. Esto tiene sentido para valores relacionados con la lógica del Effect, como roomId, pero no para theme.

Para solucionar esto, la mayoría de los usuarios simplemente desactivan la regla de lint y excluyen la dependencia. Pero eso puede llevar a errores, ya que el linter ya no puede ayudarte a mantener las dependencias actualizadas si necesitas modificar el Effect más adelante.

Con useEffectEvent, puedes separar la parte de “evento” de esta lógica fuera del Effect que la 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 las dependencias declaradas (Effect Events no son dependencias)
  // ...

Similar a los eventos del DOM, los Effect Events siempre “ven” las últimas props y estado.

Los Effect Events no deben declararse en el array de dependencias. Necesitarás actualizar a eslint-plugin-react-hooks@6.1.0 para que el linter no intente insertarlos como dependencias. Ten en cuenta que los Effect Events solo pueden declararse en el mismo componente o Hook que su Effect “propietario”. Estas restricciones son verificadas por el linter.

cacheSignal

cacheSignal te permite saber cuándo la vida útil de cache() ha terminado:

import {cache, cacheSignal} from 'react';
const dedupedFetch = cache(fetch);

async function Component() {
  await dedupedFetch(url, { signal: cacheSignal() });
}

Esto te permite limpiar o abortar trabajo cuando el resultado ya no se usará en la caché, como por ejemplo:

• React ha completado exitosamente el renderizado
• El renderizado fue abortado
• El renderizado falló

Para más información, consulta la documentación de cacheSignal.

Performance Tracks

React 19.2 agrega un nuevo conjunto de tracks personalizados a los perfiles de rendimiento de Chrome DevTools para proporcionar más información sobre el rendimiento de tu app React:

La documentación de React Performance Tracks explica todo lo que incluyen los tracks, pero aquí tienes una visión general.

Scheduler ⚛

El track Scheduler muestra en qué está trabajando React para diferentes prioridades, como “blocking” para interacciones de usuario, o “transition” para actualizaciones dentro de startTransition. Dentro de cada track, verás el tipo de trabajo realizado, como el evento que programó una actualización y cuándo ocurrió el renderizado de esa actualización.

También mostramos información como cuándo una actualización está bloqueada esperando otra prioridad, o cuándo React espera el repintado antes de continuar. El track Scheduler te ayuda a entender cómo React divide tu código en diferentes prioridades y el orden en que completó el trabajo.

Consulta la documentación del track Scheduler para ver todo lo incluido.

Componentes ⚛

El track Componentes muestra el árbol de componentes en el que React está trabajando, ya sea para renderizar o ejecutar efectos. Dentro verás etiquetas como “Mount” cuando los hijos se montan o los efectos se montan, o “Blocked” cuando el renderizado está bloqueado por ceder trabajo fuera de React.

El track Componentes te ayuda a entender cuándo se renderizan los componentes o se ejecutan efectos, y el tiempo que toma completar ese trabajo para ayudar a identificar problemas de rendimiento.

Consulta la documentación del track Componentes para ver todo lo incluido.

Nuevas características de React DOM

Prerenderizado parcial

En 19.2 estamos agregando una nueva capacidad para prerenderizar parte de la app por adelantado y reanudar el renderizado más tarde.

Esta característica se llama “Prerenderizado Parcial” y te permite prerenderizar las partes estáticas de tu app y servirlas desde un CDN, y luego reanudar el renderizado del shell para completarlo con contenido dinámico más adelante.

Para prerenderizar una app y reanudarla después, primero llama a prerender con un AbortController:

const {prelude, postponed} = await prerender(<App />, {
  signal: controller.signal,
});

// Guarda el estado pospuesto para después
await savePostponedState(postponed);

// Envía el prelude al cliente o CDN.

Luego, puedes devolver el shell prelude al cliente y más tarde llamar a resume para “reanudar” a un stream SSR:

const postponed = await getPostponedState(request);
const resumeStream = await resume(<App />, postponed);

// Envía el stream al cliente.

O puedes llamar a resumeAndPrerender para reanudar y obtener HTML estático para SSG:

const postponedState = await getPostponedState(request);
const { prelude } = await resumeAndPrerender(<App />, postponedState);

// Envía el prelude HTML completo al CDN.

Para más información, consulta la documentación de las nuevas APIs:

• react-dom/server
  • resume: para Web Streams.
  • resumeToPipeableStream para Node Streams.
• react-dom/static
  • resumeAndPrerender para Web Streams.
  • resumeAndPrerenderToNodeStream para Node Streams.

Además, las APIs de prerender ahora devuelven un estado postpone para pasar a las APIs de resume.

Cambios notables

Agrupación de límites de Suspense para SSR

Corregimos un error de comportamiento donde los límites de Suspense se revelaban de manera diferente dependiendo de si se renderizaban en el cliente o al hacer streaming desde el renderizado del lado del servidor.

A partir de 19.2, React agrupará las revelaciones de los límites de Suspense renderizados en el servidor por un corto tiempo, para permitir que se revele más contenido junto y alinearse con el comportamiento del cliente.

Esta corrección también prepara las apps para soportar <ViewTransition> para Suspense durante SSR. Al revelar más contenido junto, las animaciones pueden ejecutarse en lotes más grandes de contenido y evitar encadenar animaciones de contenido que se transmite muy seguido.

SSR: Soporte de Web Streams para Node

React 19.2 agrega soporte para Web Streams en el streaming SSR en Node.js:

• renderToReadableStream ahora está disponible para Node.js
• prerender ahora está disponible para Node.js

Así como las nuevas APIs de resume:

• resume: está disponible para Node.js.
• resumeAndPrerender está disponible para Node.js.

eslint-plugin-react-hooks v6

También publicamos eslint-plugin-react-hooks@6.1.0 con configuración plana por defecto en el preset recommended, y opción para nuevas reglas impulsadas por el React Compiler.

Para seguir usando la configuración heredada, puedes cambiar a recommended-legacy:

- extends: ['plugin:react-hooks/recommended']
+ extends: ['plugin:react-hooks/recommended-legacy']

Para una lista completa de reglas habilitadas por el compilador, consulta la documentación del linter.

Consulta el changelog de eslint-plugin-react-hooks para ver todos los cambios.

Actualización del prefijo por defecto de useId

En 19.2, actualizamos el prefijo por defecto de useId de :r: (19.0.0) o «r» (19.1.0) a _r_.

La intención original de usar un carácter especial que no fuera válido para selectores CSS era que fuera poco probable que colisionara con IDs escritos por los usuarios. Sin embargo, para soportar View Transitions, necesitamos asegurarnos de que los IDs generados por useId sean válidos para view-transition-name y nombres XML 1.0.

Registro de cambios

Otros cambios notables

• react-dom: Permitir usar nonce en estilos hoistable #32461
• react-dom: Advertir al usar un nodo propiedad de React como contenedor si también tiene contenido de texto #32774

Correcciones de errores notables

• react: Convertir context a “SomeContext” en vez de “SomeContext.Provider” #33507
• react: Corregir bucle infinito de useDeferredValue en evento popstate #32821
• react: Corregir un error al pasar un valor inicial a useDeferredValue #34376
• react: Corregir un fallo al enviar formularios con Client Actions #33055
• react: Ocultar/mostrar el contenido de límites de suspense deshidratados si se resuspenden #32900
• react: Evitar stack overflow en árboles anchos durante Hot Reload #34145
• react: Mejorar los stacks de componentes en varios lugares #33629, #33724, #32735, #33723
• react: Corregir un error con React.use dentro de un componente React.lazy #33941
• react-dom: Dejar de advertir al usar atributos ARIA 1.3 #34264
• react-dom: Corregir un error con Suspense profundamente anidado dentro de fallbacks de Suspense #33467
• react-dom: Evitar quedarse colgado al suspender después de abortar durante el renderizado #34192

Para una lista completa de cambios, consulta el registro de cambios.

Agradecimientos a Ricky Hanlon por escribir esta publicación, Dan Abramov, Matt Carroll, Jack Pope y Joe Savona por revisar esta publicación.