📋 Cheatsheet: Ciclos de Vida en Angular

🔄 Orden de Ejecución

1. constructor          → Instanciación del componente
2. ngOnChanges         → Cada cambio en @Input
3. ngOnInit            → Una vez al inicializar
4. ngDoCheck           → En cada ciclo de detección
5. ngAfterContentInit  → Una vez tras inicializar contenido
6. ngAfterContentChecked → Tras verificar contenido
7. ngAfterViewInit     → Una vez tras inicializar vista
8. ngAfterViewChecked  → Tras verificar vista
9. ngOnDestroy         → Antes de destruir componente

⚡ Guía Rápida de Uso

✅ Buenas Prácticas

• constructor: Solo inyección de dependencias, no lógica pesada
• ngOnInit: Tu mejor amigo para inicializar y llamar servicios
• ngOnDestroy: SIEMPRE cancela suscripciones para evitar memory leaks
• ngAfterViewInit: Úsalo para manipular el DOM, no ngOnInit

❌ Errores a Evitar

• Lógica pesada en ngDoCheck → Se ejecuta constantemente
• No usar ngOnDestroy → Causarás fugas de memoria
• HTTP en constructor → Usa ngOnInit
• Acceder al DOM en ngOnInit → Usa ngAfterViewInit

🆕 Angular 17: Nuevos Hooks de Renderizado

// afterNextRender: Se ejecuta UNA VEZ después del próximo render
afterNextRender(() => {
  console.log('DOM renderizado por primera vez');
  // Ideal para inicialización única
});

// afterRender: Se ejecuta CADA VEZ que se renderiza
afterRender(() => {
  console.log('DOM actualizado');
  // Ideal para monitoreo continuo
});

💡 Patrón de Limpieza con Observables

import { Subject, takeUntil } from 'rxjs';

export class MiComponente implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit() {
    this.miServicio.getData()
      .pipe(takeUntil(this.destroy$))
      .subscribe(data => console.log(data));
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

🎯 Casos de Uso Específicos