React
Explica cómo Activity permite ocultar una parte de la interfaz conservando su estado y reduciendo su prioridad, sin desmontarla por completo.
A veces una sección debe ocultarse sin perder su estado interno, pero tampoco debería mantener activos todos sus efectos como si siguiera visible.
<Activity mode={isVisible ? "visible" : "hidden"}>
<SearchPanel />
</Activity>En modo oculto React conserva estado, oculta el contenido y limpia efectos activos. Al volver a visible, los efectos se configuran nuevamente.
{isVisible && <SearchPanel />}El render condicional desmonta el panel y pierde su estado.
display: none conserva tanto estado como efectos y trabajo del componente. Activity da a React conocimiento explícito de la visibilidad.
El árbol oculto sigue ocupando memoria. No es apropiado para conservar indefinidamente todas las pantallas visitadas.
Activity ofrece una tercera opción entre mantener plenamente visible y desmontar: preservar estado con actividad reducida.
render condicional
→ desmonta
→ pierde state y refs
→ ejecuta cleanup
CSS hidden/display none
→ permanece montada
→ conserva state y effects
→ React no conoce la intención de actividad
Activity hidden
→ conserva state
→ oculta la región
→ limpia o pausa trabajo coordinado según el modeloLa elección depende de si la región sigue representando una sesión útil.
<Activity mode="hidden">
<ChatPanel />
</Activity>En modo oculto, React puede limpiar effects como si la región dejara de estar activa. Al volver a visible, ejecuta setup nuevamente. Por eso un effect debe ser reversible; no asumas que solo se limpia al destruir definitivamente el componente.
El state local se preserva:
Pero las conexiones y observers deben tolerar reconexión.
function WorkspaceTabs({ activeTab }: { activeTab: "editor" | "preview" }) {
return (
<>
<Activity mode={activeTab === "editor" ? "visible" : "hidden"}>
<Editor />
</Activity>
<Activity mode={activeTab === "preview" ? "visible" : "hidden"}>
<Preview />
</Activity>
</>
);
}El editor puede conservar un borrador al cambiar de tab. Evalúa si la preview también merece permanecer en memoria o puede desmontarse.
Activity conserva el subárbol y su state, pero no sustituye:
Los datos remotos deberían seguir en una capa adecuada.
Conservar muchas pantallas puede retener:
No envuelvas cada ruta visitada indefinidamente. Define límites como últimas pestañas, pasos activos o paneles con borradores valiosos.
El contenido oculto no debe permanecer en el orden de foco ni anunciarse como visible. Verifica el DOM resultante y comportamiento de lectores de pantalla. Al revelar:
Suspense muestra una alternativa porque un descendiente no puede terminar el render. Activity expresa visibilidad y actividad de un árbol ya existente.
Suspense → pendiente por recurso
Activity → visible u oculto por productoPueden combinarse: una región preservada puede volver a suspender al reactivarse si necesita reconectar o revalidar datos.
Cambiar key crea una identidad nueva y descarta state. Activity busca conservar esa identidad. Son decisiones opuestas:
En esos casos, render condicional o state elevado puede ser más simple.
Activity depende de una versión compatible de React. Verifica documentación oficial, renderer, types y framework antes de usarla. Una wiki durable debe separar su modelo conceptual de detalles que puedan cambiar por versión.
Prueba:
Error Boundaries y recuperación modela qué ocurre cuando un subárbol no puede renderizar correctamente.