Adoptar React 19.2: Actividad para interfaces con pestañas y una lista de verificación para la actualización

Las pestañas, los asistentes y las listas fuera de la pantalla comparten un mismo problema: al ocultar un panel mediante renderizado condicional, este se desmonta, llevándose consigo la posición de desplazamiento, los formularios parcialmente completados y los datos recuperados. React 19.2 resuelve esto con el componente Activity. Esta guía aplica Activity a un diseño de pestañas y luego aborda el resto de las novedades de esta versión, además de una lista de verificación para decidir cuándo actualizar.

Qué intenta solucionar 19.2

React ahora lanza varias versiones al año, y 19.2 no es una reescritura completa. Se enfoca en problemas antiguos: pérdida de estado al desmontar, dificultades con las dependencias de efectos y el equilibrio entre páginas estáticas rápidas y datos actualizados.

Activity: ocultar la interfaz sin destruirla

Pense en Activity como una alternativa más inteligente a {condition && <Panel />}. Recibe un parámetro mode con dos valores:

• hidden oculta los hijos, desmonta sus efectos y pospone cualquier actualización hasta que React no tenga tareas de mayor prioridad pendientes.
• visible muestra los hijos, vuelve a montar sus efectos y procesa las actualizaciones de forma normal.

El detalle importante es lo que se mantiene. El estado del componente y el árbol renderizado se conservan, por lo que volver a mostrarlo es instantáneo, pero los efectos se limpian mientras está oculto. Por lo tanto, las suscripciones, los temporizadores y las consultas se detienen, lo cual suele ser lo que se desea para un panel al que nadie está mirando.

El ejemplo a continuación envuelve un panel de configuraciones y un panel de facturación dentro de sus propios límites Activity, y la propiedad activeTab decide cuál de ellos está visible. Ambos paneles mantienen su posición de desplazamiento y los valores de los campos de formulario cuando el usuario cambia de panel.

// Preserve a tab's scroll position and form state
// even when the user switches away from it
import { unstable_Activity as Activity } from 'react';

function ProfileTabs({ activeTab }) {
  return (
    <>
      <Activity mode={activeTab === 'settings' ? 'visible' : 'hidden'}>
        <SettingsPanel />
      </Activity>
      <Activity mode={activeTab === 'billing' ? 'visible' : 'hidden'}>
        <BillingPanel />
      </Activity>
    </>
  );
}

Una advertencia: el fragmento importa unstable_Activity, nombre utilizado en versiones previas a la estable. En la versión estable 19.2 el componente se exporta como Activity; por lo tanto, revise la documentación actual y ámbielo con ese nombre al actualizar.

Dado que no se desmonta ni vuelve a construir nada con cada cambio, la navegación parece más rápida. El costo es la memoria: cada panel oculto permanece activo, así que reserve Activity para pantallas que los usuarios probablemente volverán a visitar en lugar de aplicarlo a cada ruta.

useEffectEvent: valores actualizados sin volver a ejecutar efectos

Si alguna vez ha añadido un valor a un array de dependencias solo para satisfacer al analizador y luego ha observado que un efecto se ejecutaba cuando no debería, este hook es la solución. Permite que un efecto lea las últimas propiedades y estados a través de una función separada, sin que ese valor provoque su ejecución nuevamente.

Aquí theme se lee dentro de onConnected, por lo que la conexión depende únicamente de roomId.

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme); // always fresh theme
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('connected', () => onConnected());
    return () => connection.disconnect();
  }, [roomId]); // theme intentionally left out — and that's fine now
}

Tenga en cuenta que el fragmento omite la llamada a connection.connect() que una implementación real necesitaría antes de devolver los elementos para la limpieza.

Pre-renderizado parcial en React DOM

El pre-renderizado parcial comenzó como una función experimental de Next.js 14, y con la versión 19.2 esta capacidad forma parte de react-dom. React pre-renderiza la estructura estática de una página con antelación, deja espacios donde se encuentran los límites dinámicos de Suspense y rellena esos espacios según cada solicitud. Se obtiene una velocidad cercana a la de la generación estática, con la frescura que brinda el renderizado en servidor. Nuestro análisis más profundo de las primitivas SSR de React 19.2, cacheSignal y PPR aborda en detalle estas APIs.

Añadidos menores que vale la pena conocer

• Chrome DevTools ahora incluye métricas de rendimiento específicas para React, lo que permite ver qué tareas React considera bloqueantes y cuáles son transiciones, entre otras.
• cacheSignal para React Server Components ayuda a evitar trabajos redundantes relacionados con cálculos en caché.
• Las mejoras en la transmisión de contenido SSR buscan acelerar el tiempo hasta que la aplicación se vuelve interactiva.

Seguridad: actualice primero las aplicaciones RSC

Se revelaron vulnerabilidades críticas en React Server Components en diciembre de 2025. Las aplicaciones con React 19.0.0 hasta 19.2.2 que utilizan RSC, incluida la configuración predeterminada de create-next-app, estuvieron expuestas a ejecución remota de código. Si utiliza Server Components, actualícese de inmediato a una versión corregida; consulte las versiones exactas corregidas en las advertencias oficiales de React y Next.js, ya que se publicaron parches adicionales.

¿Debería su equipo actualizar ahora?

• Actualice pronto si desarrolla aplicaciones SSR complejas, envía interfaces de usuario con muchas pestañas o pasos, o sigue luchando contra errores relacionados con dependencias.
• Actualice con cuidado si mantiene una gran base de código heredada: pruebe primero las reglas más estrictas de linting para hooks en una rama y corrija lo que indiquen.
• Actualice de inmediato, independientemente de las funcionalidades, si depende de Componentes del Servidor y aún no ha aplicado los parches de seguridad.

Conclusión

19.2 es una versión discreta que trae beneficios en el trabajo diario: Activity cambia la forma en que se aborda el estado retenido, useEffectEvent elimina un tipo de soluciones artificiales relacionadas con dependencias, y el pre-renderizado reduce la diferencia entre páginas estáticas y dinámicas. Pruébelas en una pantalla con pestañas antes de implementarlas a gran escala.

Lecturas relacionadas

• Primitivas SSR de React 19.2: Activity, cacheSignal y PPR explicados — Aprenda cómo el nuevo componente Activity, cacheSignal y el pre-renderizado parcial de React 19.2 brindan a los desarrolladores un control directo sobre el rendimiento del renderizado en servidor.
• Leer el historial de rendimiento de React en Chrome DevTools para encontrar renderizaciones lentas — Aprenda cómo las secciones Scheduler, Components y Server añadidas en React 19.2 muestran dónde pasa su tiempo una interacción lenta, así como un flujo de trabajo de registro-corrección-registro para actuar al respecto.