Ciclo de vida de pantallas: evitar bugs de estado y memoria

Entiende cómo nacen, se pausan y se destruyen pantallas móviles para gestionar recursos, estado y UX sin errores silenciosos.

¿Cuánto sabes de Desarrollo de Apps?

📘 Teoría

Qué significa realmente el ciclo de vida

No se trata de memorizar callbacks, sino de decidir qué hacer en cada transición.

En Android, Activity/Fragment transicionan entre estados donde debes iniciar o detener recursos explícitamente.

En iOS, ViewController y estado de escena también marcan momentos para preparar UI y persistir datos temporales.

Tu objetivo es mantener consistencia: que el usuario retome tarea sin pérdidas cuando vuelve a la app.

Inicio: preparar dependencias y estado inicial.
Pausa: liberar recursos caros y guardar progreso crítico.
Reanudación: restaurar contexto sin duplicar procesos.

Errores de lifecycle que se pagan caro

Muchos bugs en producción aparecen solo tras pausas/reanudaciones reales.

Dejar listeners activos al salir de pantalla genera eventos duplicados y consumo de batería innecesario.

No guardar estado mínimo (filtros, formulario parcial, scroll) rompe continuidad de tarea del usuario.

Reiniciar flujos completos al volver desde background produce frustración y abandono en procesos largos.

Gestión mínima por estado de app

type AppState = 'active' | 'background' | 'inactive';

function onAppStateChange(next: AppState) {
  if (next === 'background') {
    pausarStreams();
    guardarEstadoTemporal();
  }

  if (next === 'active') {
    restaurarEstadoTemporal();
    reanudarStreamsSiNecesario();
  }
}

Estrategia práctica de arquitectura

La forma más segura es aislar responsabilidades: UI, estado y recursos externos.

Modela estado de pantalla en una capa dedicada (ViewModel o equivalente) para sobrevivir a recreaciones de vista.

Encapsula suscripciones de red/sensores en módulos que conozcan cuándo iniciar y cuándo detenerse.

Prueba explícitamente escenarios de interrupción: bloqueo de pantalla, multitarea y reconexión de red.

1 Qué significa realmente el ciclo de vida 2 Errores de lifecycle que se pagan caro 3 Estrategia práctica de arquitectura

🧪 Aprende probando

Ejemplo Ejemplo guiado Define qué harías al pasar de estado activo a background en una app de mensajería con carga de imágenes.

⌄

🏁 Retos

Reto Reto práctico Propón una política de lifecycle para evitar listeners duplicados y pérdida de progreso en formulario largo.

⌄

🧰 Recursos

Enlaces útiles

Android Activity Lifecycle UIKit: UIViewController Android Architecture Guide SwiftUI State SwiftUI ObservedObject

Test

Comprueba tus conocimientos con un test sobre Desarrollo de Apps.

Test de Desarrollo de Apps

Recursos del curso 20

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards

‹

Lección 04

UX móvil y navegación: diseñar flujos que no frustren

Lección 06

Arquitectura MVVM: separar UI, estado y lógica sin caos

›