React Canary Activity: Ocultar UI Sin Desmontar y Preservar Estado al Instante

¿Qué es `<Activity />`?

React ha introducido un nuevo componente, <Activity />, en el canal de lanzamiento Canary. Proporciona una forma de ocultar partes de tu UI sin desmontarlas. A diferencia del renderizado condicional o trucos con CSS, <Activity /> preserva el DOM y el estado mientras limpia los efectos secundarios (Effects) cuando está oculto, y luego los restaura instantáneamente cuando vuelve a ser visible.

Recursos:

¿Qué está cambiando?

La mayoría de apps de React ocultan UI con renderizado condicional:

{isOpen && <Sidebar />}

Esto funciona, pero desmonta el componente y descarta el estado local. Volver a mostrar el componente significa reconstruir todo desde cero.

Otros dependen de CSS:

.sidebar {
  display: none;
}

Esto preserva el DOM y el estado, pero deja los Effects ejecutándose, lo que puede causar fugas de memoria y trabajo innecesario.

<Activity /> combina lo mejor de ambos mundos:

Oculta mediante display: none.
Preserva el DOM y el estado.
Limpia los Effects mientras está oculto.
Restaura instantáneamente cuando se vuelve a mostrar.

Cómo funciona

import { unstable_Activity as Activity } from "react";

<Activity mode={isOpen ? "visible" : "hidden"}>
  <Sidebar />
</Activity>

mode="visible" o "hidden" alterna la visibilidad.
Los árboles ocultos siguen en el DOM pero no son visibles.
El estado se preserva, los Effects se pausan y se restauran al mostrarse.
React programa las actualizaciones ocultas con menor prioridad, así tu app permanece responsiva.

Casos de uso

Tabs, drawers y sidebars — Mantén el scroll, inputs y estado local intactos al alternar entre vistas.
Pre-renderizar UI oculta — Renderiza en segundo plano las pantallas que probablemente verá el usuario para revelarlas instantáneamente.
Rendimiento durante la carga — Renderiza paneles no críticos ocultos, listos para usar más tarde.
Restauración de borradores — Los usuarios no perderán su entrada al cambiar entre secciones.

Cómo se compara

Enfoque	DOM preservado	Estado preservado	Effects pausados
Renderizado condicional	No	No	N/A
CSS `display: none`	Sí	Sí	No
`<Activity />`	Sí	Sí	Sí

Renderizado condicional: Desmonta el componente, se pierde el estado.
CSS display: none: Mantiene DOM/estado pero los Effects siguen ejecutándose.
Suspense / Transitions: Manejan renderizado asíncrono y prioridad de actualización; <Activity /> maneja visibilidad + ciclo de vida.

Advertencias

Los subárboles ocultos aún se re-renderizan con baja prioridad — no pongas en segundo plano árboles gigantes que cambien rápidamente sin necesidad.
Los Effects en niveles superiores (fuera del Activity) no se pausarán.
Cuando se combina con View Transitions, mostrar un <Activity /> dentro de una transición activará animaciones de entrada/salida.

Pruébalo hoy

Instala la versión canary:

npm install react@canary react-dom@canary

Y prueba la nueva característica:

<Activity mode={isOpen ? "visible" : "hidden"}>
  <Panel />
</Activity>

Nota: Importa mediante unstable_Activity en Canary. La API se estabilizará antes del lanzamiento semver.

Conclusión

El <Activity /> de React es un nuevo primitivo para gestión de visibilidad:

Ocultar sin desmontar
Preservar DOM y estado
Pausar efectos secundarios mientras está oculto

Es una API pequeña, pero resuelve uno de los problemas de UI más comunes. Con <Activity />, React continúa su tendencia de hacer que la UI asíncrona y con estado sea una preocupación de primera clase.

¿Qué es <Activity />?