Aula 13 - Ciclo de Vida e Performance ⏳

Objetivo

Objetivo: Entender os momentos em que um componente "nasce", "vive" e "morre" no navegador, e como usar as funções de ciclo de vida para gerenciar recursos e otimizar a performance da aplicação.

---

1. O que é o Ciclo de Vida? 🧬

Todo componente no Svelte passa por fases. Conhecer essas fases permite que você execute código no momento exato (ex: buscar dados assim que o usuário entra na página).

As principais funções:

1. onMount: Executa logo após o componente ser renderizado pela primeira vez no DOM.
2. onDestroy: Executa logo antes do componente ser destruído (removido da tela).
3. beforeUpdate: Executa momentos antes do DOM ser atualizado.
4. afterUpdate: Executa logo após o DOM ser sincronizado com os dados.

---

2. Fases do Componente (Mermaid) 📊

graph TD
    A[Início] --> B[Script Executado]
    B --> C[Renderização Initial]
    C --> D[onMount]
    D --> E{Dados mudaram?}
    E -- Sim --> F[beforeUpdate]
    F --> G[Sincroniza DOM]
    G --> H[afterUpdate]
    H --> E
    E -- Não --> I[Componente removido]
    I --> J[onDestroy]
    J --> K[Fim]

---

3. O Poder do onMount 🔌

O onMount é a função mais utilizada. É o lugar perfeito para: * Fazer chamadas de API. * Interagir com bibliotecas externas (como mapas ou gráficos). * Focar em um campo de input automaticamente.

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

  onMount(() => {
    console.log("O componente está pronto!");
    // Código de inicialização aqui
  });
</script>

---

4. Limpeza e Performance com onDestroy 🧹

Muitos bugs e lentidões acontecem porque esquecemos de "limpar" a bagunça ao sair de uma página.

import { onDestroy } from 'svelte';

const intervalo = setInterval(() => {
  console.log('Rodando...');
}, 1000);

// Se não limparmos, o intervalo continuará rodando para sempre!
onDestroy(() => {
  clearInterval(intervalo);
});

---

5. Simulação de Ciclo de Vida 💻

<div id="termynal" data-termynal>
    <span data-ty="input"># Componente carregado no DOM</span>
    <span data-ty="progress"></span>
    <span data-ty>onMount executado!</span>
    <span data-ty="input"># Usuário mudou de rota</span>
    <span data-ty>onDestroy: Limpando memória...</span>
    <span data-ty>✔ Componente removido com segurança.</span>
</div>

---

6. Mini-Projeto: Monitor de Performance (Timer) 🚀

Sua missão hoje: 1. Crie um componente que exiba um cronômetro na tela (segundos passando). 2. Use um setInterval iniciado dentro de uma função. 3. Garanta que o cronômetro pare e limpe o intervalo ao sair do componente usando onDestroy. 4. Adicione um onMount que mostre um alert("Bem-vindo ao Timer!") apenas uma vez.

Atenção

Não limpar timers ou listeners de eventos pode causar Memory Leaks, fazendo seu site ficar lento ou até travar o navegador do usuário após algum tempo de uso.

---

7. Exercício de Fixação 📝

1. Qual a diferença entre o script principal do componente e a função onMount?
2. Por que devemos usar onDestroy ao trabalhar com setInterval ou addEventListener globais?
3. Quando o afterUpdate é disparado?

---

Próxima Aula: Vamos subir o nível com Boas Práticas e Arquitetura Frontend! 🏛️