render_macros: false

Aula 13 - Ciclo de Vida ⏳

O Nascimento e a Morte de um Componente

Agenda de Hoje 📅

1. O que é o Ciclo de Vida?
2. onMount: O componente nasceu!
3. onDestroy: Faxina e limpeza
4. Estados de Atualização: before e after
5. O comando tick()
6. Prática: Timer Inteligente

1. O Ciclo de Vida 🔄

• Todo componente passa por etapas desde que aparece na tela até ser removido.
• O Svelte nos dá "ganchos" (Hooks) para executar código em cada etapa.

2. onMount 🐣

• Executa uma única vez logo após o componente ser renderizado.
• É o lugar perfeito para chamadas de API ou focar um input.

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    console.log("O componente está pronto!");
    // buscarDadosDaAPI();
  });
</script>

3. onDestroy 💀

• Executa logo antes do componente ser destruído.
• Fundamental: Serve para limpar intervalos ou remover eventos globais.

<script>
  import { onDestroy } from 'svelte';

  const interval = setInterval(() => { ... }, 1000);

  onDestroy(() => {
    clearInterval(interval); // Evita vazamento de memória!
  });
</script>

4. beforeUpdate e afterUpdate 🔄

• beforeUpdate: Roda logo antes do DOM ser atualizado.
• afterUpdate: Roda logo após a atualização visual.
• Úteis para gerenciar scroll automático ou medir elementos.

5. A Promessa tick() ⏱️

• O Svelte agrupa as mudanças e atualiza o DOM em lotes para performance.
• Se você precisar dar certeza de que o DOM mudou ANTES de fazer algo... use tick.

import { tick } from 'svelte';

async function atualizar() {
  valor = "Novo";
  await tick();
  // Agora temos certeza que a tela já mudou!
}

6. Transições (Bônus) ✨

• O Svelte tem transições nativas incríveis.

<script>
  import { fade, fly } from 'svelte/transition';
  let visivel = true;
</script>

{#if visivel}
  <div transition:fade>Olá Suave!</div>
  <div transition:fly={{ y: 200, duration: 2000 }}>Subindo!</div>
{/if}

7. Fluxo do Ciclo de Vida 🌊

graph TD
    A[Início] --> B(Script Executado)
    B --> C(Renderização Inicial)
    C --> D[onMount]
    D --> E{Dados Mudaram?}
    E -->|Sim| F(beforeUpdate)
    F --> G(DOM Atualizado)
    G --> H(afterUpdate)
    H --> E
    E -->|Não| I(Componente Removido)
    I --> J[onDestroy]

8. Prática: Relógio Digital ⌚

• Use onMount para iniciar um setInterval.
• Atualize uma variável tempo = new Date().
• Use onDestroy para limpar o intervalo.
• Adicione uma transição fade para quando o relógio aparecer.

9. Resumo da Aula ✅

• onMount: Setup inicial.
• onDestroy: Limpeza (essencial para performance).
• tick: Sincroniza lógica com o DOM.

Próxima Aula: Boas Práticas e Arquitetura 🏗️

• Organização de pastas.
• Clean Code no Svelte.
• Reutilização de Lógica.

Dúvidas? 🤔

"Um bom programador sabe quando um código nasce, mas um excelente programador sabe como ele deve morrer."