Capítulo 07: Ciclo de Vida de Componentes e Novos Hooks (afterNextRender, afterRender)

Capítulo 07: Ciclo de Vida de Componentes e Novos Hooks (afterNextRender, afterRender)

Especialização em Front-End com Angular • Angular 18+ • Signals, Standalone Architecture, RxJS, NgRx e SSR

---

🗺️ Mapa Conceitual do Ciclo de Vida e Render Hooks Modernos

flowchart TD
    A["Instanciação do Componente (constructor)"] --> B["Injeção de Dependências & Inicialização de Signals"]
    B --> C["Renderização de Template / Compilação DOM"]

    subgraph SSR_SAFE_ZONE["Hooks de Renderização Seguros para SSR / Browser"]
        D["afterNextRender()"]
        E["afterRender()"]
    end

    C --> SSR_SAFE_ZONE

    D -->|"Executa exatamente 1 vez no Navegador"| F["Leitura de Medidas DOM / Integração Canvas / D3 / Chart.js"]
    E -->|"Executa a cada ciclo de renderização no Navegador"| G["Sincronização Contínua de Animações"]

    F & G --> H["Componente Ativo e Interativo"]
    H --> I["Destruição do Componente"]
    I --> J["DestroyRef.onDestroy() / takeUntilDestroyed()"]

    style A fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
    style C fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style SSR_SAFE_ZONE fill:#ede7f6,stroke:#7e57c2,stroke-width:2px
    style J fill:#fce4ec,stroke:#e91e63,stroke-width:2px

---

🏛️ 1. A Evolução do Ciclo de Vida no Angular 18+

Durante anos, o ciclo de vida do Angular foi governado por interfaces imperativas (OnInit, OnChanges, AfterViewInit, OnDestroy). Contudo, o advento do Server-Side Rendering (SSR), hidratação não destrutiva e a transição para aplicações Zoneless revelaram limitações severas nesse modelo clássico:

1. Quebras de SSR com window ou document: Hooks como ngOnInit e ngAfterViewInit executam tanto no servidor Node.js quanto no browser. Desenvolvedores frequentemente causavam exceções fatais ao tentar acessar APIs do navegador no servidor.
2. Layout Thrashing: Desenvolvedores liam e escreviam no DOM desordenadamente em ngAfterViewInit, forçando o navegador a recalcular o layout várias vezes por frame.
3. Acoplamento a Classes: O ciclo de vida tradicional exigia herança/implementação de interfaces verbosas na classe do componente.

O Angular 18 unifica e moderniza o ciclo de vida com Render Hooks funcionais e o serviço DestroyRef.

---

⚙️ 2. Os Novos Hooks de Renderização: afterNextRender e afterRender

Essas funções só podem ser registradas em um contexto de injeção (tipicamente no construtor) e possuem uma garantia fundamental: NUNCA são executadas no servidor durante o SSR.

2.1 afterNextRender: Execução Única Pós-Renderização

Ideal para inicializar plugins terceiros que dependem de dimensões reais do DOM (Chart.js, Leaflet Maps, PrismJS, Google Maps):

import { Component, ElementRef, viewChild, afterNextRender } from '@angular/core';

@Component({
  selector: 'app-grafico-metricas',
  standalone: true,
  template: `
    <div class="container-grafico">
      <canvas #meuCanvas></canvas>
    </div>
  `
})
export class GraficoMetricasComponent {
  canvasRef = viewChild<ElementRef<HTMLCanvasElement>>('meuCanvas');

  constructor() {
    afterNextRender(() => {
      // Garante execução exclusiva no browser após o DOM estar pronto e medido
      const elemento = this.canvasRef()?.nativeElement;
      if (elemento) {
        const largura = elemento.getBoundingClientRect().width;
        console.log(`Canvas renderizado com largura inicial de ${largura}px`);
        this.inicializarGrafico(elemento);
      }
    });
  }

  private inicializarGrafico(canvas: HTMLCanvasElement): void {
    const ctx = canvas.getContext('2d');
    if (ctx) {
      ctx.fillStyle = '#03a9f4';
      ctx.fillRect(10, 10, 150, 80);
    }
  }
}

2.2 Fases de Renderização para Eliminar Layout Thrashing

Tanto afterNextRender quanto afterRender aceitam especificar fases de execução para orquestrar leituras e escritas sem penalizar a performance:

afterRender({
  earlyRead: () => {
    // Fase 1: Lê posições e dimensões antes de qualquer escrita
    return document.querySelector('.barra-rolagem')?.scrollTop;
  },
  write: (scrollTop) => {
    // Fase 2: Escreve no DOM com base na leitura anterior sem forçar reflow
    meuElemento.style.transform = `translateY(${scrollTop}px)`;
  },
  read: () => {
    // Fase 3: Leituras finais após as mutações do DOM
  }
});

---

🧹 3. Descarte Limpo com DestroyRef

Em vez de implementar a interface OnDestroy com o método ngOnDestroy(), o Angular moderno disponibiliza o serviço injetável DestroyRef. Ele permite registrar callbacks de desmontagem em qualquer lugar da classe, função ou factory utilitária:

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

@Component({
  selector: 'app-timer-contador',
  standalone: true,
  template: `<p>Segundos decorridos: {{ segundos() }}</p>`
})
export class TimerContadorComponent {
  private destroyRef = inject(DestroyRef);
  segundos = signal(0);

  constructor() {
    const intervaloId = setInterval(() => {
      this.segundos.update(s => s + 1);
    }, 1000);

    // Registra a limpeza sem poluir a classe com ngOnDestroy
    this.destroyRef.onDestroy(() => {
      clearInterval(intervaloId);
      console.log('Timer finalizado com sucesso via DestroyRef!');
    });
  }
}

---

⚖️ 4. Matriz Comparativa: Hooks Clássicos vs Modernos

Cenário de Uso	Hook Clássico (Legado)	Solução Moderna Angular 18+
Inicialização de Estado Lógico	ngOnInit()	Inicialização direta de signals ou construtor
Manipulação do DOM / Canvas	ngAfterViewInit() (perigoso em SSR)	afterNextRender() (100% seguro para SSR)
Reação a Mudanças de Entradas	ngOnChanges()	input() combinado com computed() ou effect()
Sincronização pós-render contínua	ngAfterViewChecked() (alto custo)	afterRender({ phase: ... })
Limpeza de Recursos e Inscrições	ngOnDestroy()	DestroyRef.onDestroy() ou takeUntilDestroyed()

---

⚠️ 5. Armadilhas Comuns e Anti-Patterns

1. Acessar window ou localStorage em ngOnInit com SSR Ativo:
   • Falha: O servidor Node.js lançará ReferenceError: window is not defined.
   • Correção: Mova acessos a globais do browser para o callback de afterNextRender().
2. Atualizar Signals Diretamente Dentro de afterRender sem Cuidado:
   • Risco: Se um afterRender atualiza um signal que força nova renderização da view, cria-se um loop infinito de renderização e congelamento da página.
   • Regra: Nunca despache mutações de estado síncronas que afetem a mesma view dentro de afterRender.

---

🛡️ 6. Boas Práticas de Engenharia

• Prefira Composição a Herança de Interfaces: Utilizar DestroyRef permite criar funções utilitárias reutilizáveis que se auto-desinscrevem sem que a classe do componente precise gerenciar referências de assinatura.
• Auditoria de Timers e Listeners Nativos: Sempre que registrar addEventListener nativo ou setInterval, vincule imediatamente a remoção ao destroyRef.onDestroy().

---

📋 7. Cheat-Sheet: Resumo Executivo

// Executa apenas no navegador, uma única vez após render:
afterNextRender(() => {
  inicializarPluginDoDOM();
});

// Executa a cada ciclo de render no navegador:
afterRender(() => {
  sincronizarLayout();
});

// Limpeza de recursos:
inject(DestroyRef).onDestroy(() => {
  removerListeners();
});