Angular Academy · Lección

Limpieza y ciclo de vida de effects

Limpie recursos dentro de los effects.

Limpieza y ciclo de vida de effects 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.

Por qué es importante la limpieza

Un efecto puede iniciar recursos: temporizadores, suscripciones y listeners de eventos. Cada vez que el efecto se vuelve a ejecutar, el recurso anterior debe desactivarse primero; de lo contrario, se producen fugas de temporizadores y listeners. Angular proporciona un hook onCleanup para ello.

La callback onCleanup

La función del efecto recibe una función onCleanup. Registre con ella una callback de desmontaje; Angular la llama antes de la siguiente ejecución y al destruirse.

import { effect } from '@angular/core';

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), 1000);
  onCleanup(() => clearInterval(id));
});

La limpieza se ejecuta antes de cada repetición

Cuando cambia una dependencia, Angular llama primero a la limpieza registrada y después vuelve a ejecutar el cuerpo del efecto. Esto garantiza que solo haya un recurso activo a la vez.

const delay = signal(1000);

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), delay());
  onCleanup(() => clearInterval(id)); // clears old interval first
});

delay.set(500); // old interval cleared, new one started

Limpiar listeners de eventos

Los listeners del DOM añadidos en un efecto deben eliminarse durante la limpieza para evitar handlers duplicados y fugas.

effect((onCleanup) => {
  const handler = () => console.log(window.innerWidth);
  window.addEventListener('resize', handler);
  onCleanup(() => window.removeEventListener('resize', handler));
});

Limpiar suscripciones

Si un efecto se suscribe a un Observable, cancele la suscripción durante la limpieza. (A menudo usaría otras herramientas, pero esto muestra el patrón).

effect((onCleanup) => {
  const sub = interval$.subscribe(v => console.log(v));
  onCleanup(() => sub.unsubscribe());
});

Limpiar al destruirse

Cuando se destruye el componente propietario del efecto, Angular ejecuta automáticamente la limpieza final y después destruye el efecto. No quedan temporizadores filtrados.

Orden: limpieza y luego cuerpo

La primera vez que se ejecuta un efecto no hay nada que limpiar. A partir de la segunda ejecución, la secuencia siempre es: limpieza -> cuerpo.

let runs = 0;
effect((onCleanup) => {
  runs++;
  console.log('run', runs, dep());
  onCleanup(() => console.log('cleanup before run', runs + 1));
});

Evitar trabajo pesado sin limpieza

Cualquier recurso de larga duración iniciado en un efecto debe tener una limpieza correspondiente. Un error frecuente es olvidar la limpieza, lo que hace que los intervalos se acumulen con cada cambio de dependencia.

Opción manualCleanup

Para efectos creados fuera de un componente (por ejemplo, en un servicio raíz que vive indefinidamente), puede usar la opción manualCleanup y llamar después a ref.destroy() cuando corresponda.

const ref = effect(() => {
  console.log(value());
}, { manualCleanup: true });

// You are now responsible for:
// ref.destroy();

DestroyRef como alternativa

Para desmontajes que no sean de efectos, puede inyectar DestroyRef y registrar callbacks con onDestroy. Dentro de los efectos, prefiera onCleanup para la limpieza de cada ejecución.

import { inject, DestroyRef } from '@angular/core';

const destroyRef = inject(DestroyRef);
destroyRef.onDestroy(() => console.log('component destroyed'));

Integrarlo todo

Un efecto de sincronización con debounce: cada cambio de valor cancela el temporizador anterior y programa un nuevo guardado.

const query = signal('');

effect((onCleanup) => {
  const q = query();
  const id = setTimeout(() => save(q), 300);
  onCleanup(() => clearTimeout(id));
});

Comprobación rápida

Compruebe su comprensión de la limpieza de efectos.

Resumen: limpieza y ciclo de vida de los efectos

Use el parámetro onCleanup para desmontar los recursos iniciados dentro de un efecto.

La limpieza se ejecuta antes de cada repetición y al destruirse.
Limpie siempre los temporizadores, listeners y suscripciones.
manualCleanup para efectos de larga duración; DestroyRef para desmontajes generales.

A continuación: linkedSignal y patrones avanzados.

Preguntas frecuentes

¿La lección «Limpieza y ciclo de vida de effects» es gratis?

Sí — el texto completo de «Limpieza y ciclo de vida de effects» 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 «Limpieza y ciclo de vida de effects»?

Limpie recursos dentro de los effects. 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 «Limpieza y ciclo de vida de effects»?

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

← Volver a Angular Academy