Angular Academy · Lección

Cancelación de suscripciones y fugas de memoria

Evite fugas con takeUntilDestroyed.

Cancelación de suscripciones y fugas de memoria es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

El problema de las fugas de memoria

Si se suscribe a un observable de larga duración en un componente y nunca cancela la suscripción, la devolución de llamada sigue ejecutándose después de destruirse el componente. Esto provoca una fuga de memoria y puede causar errores o trabajo duplicado.

Cancelar la suscripción manualmente

La solución básica es almacenar la Subscription y cancelar la suscripción en ngOnDestroy.

import { Component, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';

export class WidgetComponent implements OnDestroy {
  private sub = interval(1000).subscribe(n => console.log(n));
  ngOnDestroy() { this.sub.unsubscribe(); }
}

Gestionar varias suscripciones

Una sola Subscription puede contener suscripciones secundarias mediante .add(); después, una llamada a unsubscribe() las cancela todas.

private subs = new Subscription();
ngOnInit() {
  this.subs.add(a$.subscribe());
  this.subs.add(b$.subscribe());
}
ngOnDestroy() { this.subs.unsubscribe(); }

takeUntilDestroyed

Angular proporciona takeUntilDestroyed(), que completa automáticamente el flujo cuando se destruye el componente; no se necesita un ngOnDestroy manual.

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export class WidgetComponent {
  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(n => console.log(n));
  }
}

Requisito del contexto de inyección

Cuando se llama sin argumentos, takeUntilDestroyed() debe ejecutarse en un contexto de inyección (como el constructor). Fuera de él, pase explícitamente un DestroyRef.

import { inject, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

const destroyRef = inject(DestroyRef);
ngOnInit() {
  source$.pipe(takeUntilDestroyed(destroyRef)).subscribe();
}

El patrón takeUntil (clásico)

Antes de takeUntilDestroyed, el patrón estándar utilizaba un Subject que emitía valores en ngOnDestroy.

private destroy$ = new Subject<void>();
ngOnInit() {
  source$.pipe(takeUntil(this.destroy$)).subscribe();
}
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Los flujos que finalizan no requieren limpieza

Las solicitudes de HttpClient emiten una vez y después finalizan, por lo que limpian sus propios recursos. Por lo general, no necesita cancelar la suscripción a una única llamada HTTP, aunque takeUntilDestroyed sigue siendo seguro.

El pipe async lo gestiona por usted

El mejor enfoque para las plantillas es permitir que el pipe async se suscriba y cancele la suscripción automáticamente. Lo veremos en la siguiente lección.

// template:
// <div>{{ user$ | async | json }}</div>
// No manual subscribe / unsubscribe needed

Señales de una fuga de suscripción

Las solicitudes de red duplicadas, los controladores que se ejecutan después de la navegación, el aumento de memoria en las herramientas de desarrollo o los errores «Cannot read property of destroyed view» suelen indicar que se olvidó cancelar alguna suscripción.

toSignal también limpia automáticamente

Convertir un observable en una señal con toSignal() también cancela automáticamente la suscripción cuando se destruye el contexto propietario.

import { toSignal } from '@angular/core/rxjs-interop';

user = toSignal(this.http.get('/api/me'));
// auto-unsubscribed on destroy

Elegir un enfoque

En las plantillas, prefiera el pipe async o toSignal; utilice takeUntilDestroyed() para las suscripciones manuales y recurra a una colección de Subscription solo cuando sea necesario.

Comprobación rápida

Compruebe lo que ha aprendido sobre la cancelación de suscripciones.

Resumen: Cancelación de suscripciones y fugas de memoria

Cancele siempre las suscripciones de larga duración.

takeUntilDestroyed() completa automáticamente el flujo al destruirse el contexto.
El pipe async y toSignal() gestionan las suscripciones por usted.
Las llamadas HTTP individuales se completan automáticamente.

Siguiente: el pipe async en profundidad.

Preguntas frecuentes

¿La lección «Cancelación de suscripciones y fugas de memoria» es gratis?

Sí — el texto completo de «Cancelación de suscripciones y fugas de memoria» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Cancelación de suscripciones y fugas de memoria»?

Evite fugas con takeUntilDestroyed. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Cancelación de suscripciones y fugas de memoria»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Observables y suscripciones
Subjects y BehaviorSubject
Cancelación de suscripciones y fugas de memoria
El pipe async

← Volver a Angular Academy