Padrões de Ciclo de Vida e Limpeza no Svelte 5

O que são efeitos

Efeitos são um dos recursos mais poderosos—e mais incompreendidos—do Svelte 5. Eles permitem sincronizar seu estado reativo com o mundo externo: o DOM, APIs do navegador, bibliotecas de terceiros ou qualquer sistema que não "fale Svelte." Mas grandes poderes trazem grandes responsabilidades. Usados incorretamente, os efeitos podem causar problemas de desempenho, vazamentos de memória e o temido loop infinito.

Este tutorial leva você dos fundamentos do que são efeitos, passando pelas nuances de quando eles são executados e como limpá-los corretamente, até padrões avançados que tornarão suas aplicações Svelte 5 robustas e fáceis de manter.

Em 90% dos casos você não precisa de um $effect() !!!

Por que isso é importante?

A maior parte do fluxo de dados permanece inteiramente dentro do grafo reativo do Svelte: use $state para dados, $derived/$derived.by para valores computados, e manipuladores de eventos/atributos comuns para atualizações do DOM.

Recorra a um efeito apenas quando precisar interagir com algo que o Svelte não consegue gerenciar por você (APIs do navegador, timers, assinaturas, bibliotecas imperativas). Uma verificação rápida: se o código não se comunica com o mundo externo, provavelmente pertence ao $derived ou à marcação direta, não a um efeito.

Os efeitos são executados de forma assíncrona após as atualizações do DOM. Esse agrupamento previne re-execuções desnecessárias e mantém seu aplicativo responsivo.

O que é um Efeito e Por que Precisamos Dele?

O Conceito: Conectando Dois Mundos

Imagine sua aplicação Svelte como um universo reativo autocontido. Dentro desse universo, as mudanças de estado fluem automaticamente—quando você atualiza uma variável $state, tudo que depende dela (incluindo sua interface) também é atualizado. Isso é sincronização reativa, e o Svelte lida com isso de forma elegante.

Mas o que acontece quando você precisa interagir com algo fora desse universo? Coisas como:

Desenhar em um elemento <canvas>
Configurar um timer com setInterval
Assinar uma conexão WebSocket
Integrar uma biblioteca de gráficos de terceiros
Registrar eventos de analytics
Armazenar dados no localStorage

Esses sistemas externos não entendem a reatividade do Svelte. Eles não são atualizados automaticamente quando seu estado muda. É aqui que os efeitos entram—eles são a ponte entre o mundo reativo do Svelte e tudo que está fora dele.

A Definição

Um efeito é uma função que é executada em resposta a mudanças de estado. É como você diz ao Svelte: "Sempre que esses pedaços de estado mudarem, execute este código."

<script>
	let count = $state(0)

	// This effect runs whenever `count` changes
	$effect(() => {
		console.log(`The count is now: ${count}`)
	})
</script>

<button onclick={() => count++}>
	Increment: {count}
</button>

O que acontece aqui:

Quando o componente é montado pela primeira vez, o efeito é executado uma vez, registrando "The count is now: 0"
Cada vez que você clica no botão, count muda
O Svelte detecta que o efeito depende de count
O efeito é executado novamente, registrando o novo valor

Efeitos São uma "Saída de Emergência"

Aqui está algo crucial para entender: efeitos devem ser seu último recurso, não sua primeira ferramenta. A documentação do Svelte os chama explicitamente de "saída de emergência." Por quê?

Porque o sistema reativo do Svelte—$state e $derived—é projetado para lidar com a maior parte da sincronização de dados automaticamente. Efeitos são para quando você precisa sair desse sistema. Se você se encontrar usando efeitos em todo lugar, provavelmente está lutando contra o Svelte em vez de trabalhar com ele.

Bons usos para efeitos:

Sincronizar com APIs do navegador (canvas, localStorage, clipboard)
Integrar bibliotecas de terceiros
Configurar assinaturas (WebSockets, ouvintes de eventos)
Analytics e logging
Manipulação direta do DOM

Maus usos para efeitos (use $derived em vez disso):

Calcular valores a partir de outros valores
Transformar dados
Sincronizar um pedaço de estado com outro

Exploraremos essa distinção em profundidade na seção "Quando NÃO usar $effect".

Quando os Efeitos São Executados: O Ciclo de Vida

Entender quando os efeitos são executados é essencial para escrever código correto. Vamos detalhar o ciclo de vida completo.

A Execução Inicial: Após a Montagem

Os efeitos são executados pela primeira vez depois que o componente foi montado no DOM. Isso é importante—significa que você pode acessar com segurança elementos do DOM dentro de efeitos:

<script>
	let canvas
	let color = $state('#ff3e00')
	let size = $state(50)

	$effect(() => {
		// `canvas` is guaranteed to exist here because
		// this runs AFTER the component mounts
		const context = canvas.getContext('2d')
		context.clearRect(0, 0, canvas.width, canvas.height)
		context.fillStyle = color
		context.fillRect(0, 0, size, size)
	})
</script>

<canvas bind:this={canvas} width="100" height="100"></canvas>

Re-execuções: Em uma Microtarefa

Quando o estado reativo muda, os efeitos não são executados imediatamente. Em vez disso, são agendados para serem executados em uma microtarefa—um atraso muito curto que permite que múltiplas mudanças sejam agrupadas.

<script>
	let width = $state(100)
	let height = $state(100)

	$effect(() => {
		console.log(`Dimensions: ${width} x ${height}`)
	})

	function resize() {
		// These two changes happen in the same synchronous code block
		width = 200
		height = 200
		// The effect does NOT run twice!
		// It runs ONCE after both changes, logging "Dimensions: 200 x 200"
	}
</script>

Por que o agrupamento importa:

Desempenho: Sem agrupamento, alterar 10 variáveis de estado dispararia 10 execuções de efeito. Com agrupamento, dispara apenas uma.
Consistência: Seu efeito sempre vê um estado consistente. Você nunca captura o estado "no meio" das atualizações.
Eficiência do DOM: As atualizações do DOM também são agrupadas, então o navegador só repinta uma vez.

Após as Atualizações do DOM

Os efeitos são executados depois que quaisquer atualizações do DOM foram aplicadas. Isso significa que, se você precisar medir o DOM ou interagir com elementos que acabaram de ser adicionados, eles estarão lá:

<script>
	let items = $state(['Apple', 'Banana'])
	let list

	$effect(() => {
		// This runs AFTER the new item is in the DOM
		console.log(`List has ${list.children.length} items`)
		// If you just pushed 'Cherry', this will log 3, not 2
	})

	function addItem() {
		items.push('Cherry')
	}
</script>

<ul bind:this={list}>
	{#each items as item}
		<li>{item}</li>
	{/each}
</ul>

Renderização do Lado do Servidor: Efeitos Não São Executados

$effect nunca é executado durante a renderização do lado do servidor. Isso significa que APIs exclusivas do navegador (document, localStorage, canvas, etc.) são sempre seguras para usar dentro de efeitos — elas nunca serão executadas em um ambiente Node.js.

Os efeitos só são executados no navegador. Durante a renderização do lado do servidor (SSR), eles são completamente ignorados. Isso faz sentido—não há DOM no servidor, nenhum canvas para desenhar, nenhum localStorage para escrever.

<script>
	$effect(() => {
		// This code NEVER runs on the server
		// Only in the browser after hydration
		document.title = 'My App'
	})
</script>

Na verdade, isso é uma funcionalidade, não uma limitação. Significa que você pode usar com segurança APIs exclusivas do navegador dentro de efeitos sem se preocupar com erros de SSR.

Linha do Tempo Visual

Veja como o ciclo de vida do efeito se parece na prática:

Component Created
       │
       ▼
┌─────────────────────────────┐
│  Initial Render (SSR)       │ ← Effects DO NOT run
│  - HTML generated on server │
└─────────────────────────────┘
       │
       ▼ (HTML sent to browser)
       │
┌─────────────────────────────┐
│  Hydration                  │
│  - DOM is connected         │
│  - Component mounts         │
└─────────────────────────────┘
       │
       ▼ (microtask)
       │
┌─────────────────────────────┐
│  Effects Run (First Time)   │ ← Dependencies recorded
└─────────────────────────────┘
       │
       ▼ (user interacts, state changes)
       │
┌─────────────────────────────┐
│  State Update Detected      │
│  - Changes batched          │
│  - DOM updated              │
└─────────────────────────────┘
       │
       ▼ (microtask)
       │
┌─────────────────────────────┐
│  Teardown Runs (if exists)  │ ← Cleanup from previous run
└─────────────────────────────┘
       │
       ▼
┌─────────────────────────────┐
│  Effect Re-runs             │ ← New dependencies recorded
└─────────────────────────────┘

Entendendo as Dependências

O que é Rastreado

Um dos aspectos mais elegantes do $effect é que ele automaticamente descobre de qual estado depende. Você não precisa listar dependências como no useEffect do React—o Svelte as rastreia em tempo de execução.

A Regra Básica

Quando um efeito é executado, o Svelte observa quais valores reativos (qualquer coisa criada com $state, $derived ou $props) são lidos de forma síncrona. Esses se tornam as dependências do efeito. Quando qualquer um deles muda, o efeito é re-executado.

<script>
	let firstName = $state('John')
	let lastName = $state('Doe')
	let age = $state(30)

	$effect(() => {
		// This effect reads `firstName` and `lastName`
		// It does NOT read `age`
		console.log(`Name: ${firstName} ${lastName}`)
	})
</script>

<!-- Changing firstName or lastName will re-run the effect -->
<!-- Changing age will NOT re-run the effect -->

O Rastreamento Acontece em Tempo de Execução

As dependências são determinadas a cada vez que o efeito é executado, não em tempo de compilação. Isso permite padrões poderosos com lógica condicional:

<script>
	let useFullName = $state(true)
	let firstName = $state('John')
	let lastName = $state('Doe')
	let nickname = $state('Johnny')

	$effect(() => {
		if (useFullName) {
			// When useFullName is true, we depend on firstName and lastName
			console.log(`Full name: ${firstName} ${lastName}`)
		} else {
			// When useFullName is false, we depend on nickname instead
			console.log(`Nickname: ${nickname}`)
		}
	})
</script>

O que acontece:

Inicialmente, useFullName é true, então o efeito lê firstName e lastName
Dependências: useFullName, firstName, lastName
Se você mudar nickname, o efeito NÃO é re-executado (não é uma dependência atual)
Se você mudar useFullName para false, o efeito é re-executado
Agora ele lê nickname, então as dependências passam a ser: useFullName, nickname
Agora alterar firstName NÃO re-executa o efeito!

O Requisito de Sincronicidade

Aqui está uma regra crítica: somente valores lidos de forma síncrona se tornam dependências. Qualquer coisa lida após um await ou dentro de um setTimeout NÃO é rastreada.

<script>
	let color = $state('#ff3e00')
	let size = $state(50)
	let canvas

	$effect(() => {
		const context = canvas.getContext('2d')
		context.clearRect(0, 0, canvas.width, canvas.height)

		// `color` is read synchronously → it IS a dependency
		context.fillStyle = color

		setTimeout(() => {
			// `size` is read AFTER a delay → it is NOT a dependency
			context.fillRect(0, 0, size, size)
		}, 0)
	})
</script>

Neste exemplo:

Alterar color irá re-executar o efeito - PREFERIDO porque é lido de forma síncrona
Alterar size NÃO irá re-executar o efeito - EVITE porque é lido de forma assíncrona

Por que esse design? É uma questão de previsibilidade. O Svelte não pode saber o que vai acontecer no futuro (após operações assíncronas concluírem), então ele rastreia apenas o que pode observar de forma síncrona.

Rastreamento de Objeto vs Propriedade

O Svelte rastreia no nível da propriedade, não no nível do objeto. Isso é sutil e importante:

<script>
	let state = $state({ value: 0 })
	let derived = $derived({ value: state.value * 2 })

	// This effect reads the `state` OBJECT, not `state.value`
	$effect(() => {
		state // Just referencing the object
		console.log('Effect 1 ran')
	})

	// This effect reads `state.value`
	$effect(() => {
		state.value // Reading the property
		console.log('Effect 2 ran')
	})

	// This effect depends on `derived`, which is a NEW object each time
	$effect(() => {
		derived
		console.log('Effect 3 ran')
	})
</script>

<button onclick={() => state.value++}>Increment</button>

Quando você clica no botão:

Efeito 1: NÃO é re-executado (a referência do objeto state não mudou, apenas uma propriedade dentro dele)
Efeito 2: É re-executado (ele lê state.value, que mudou)
Efeito 3: É re-executado (derived é um novo objeto a cada vez porque $derived retorna um objeto novo)

Rastreamento Através de Chamadas de Função

As dependências são rastreadas mesmo quando os valores são acessados indiretamente por meio de funções:

<script>
	let count = $state(0)

	function getCount() {
		return count // This reads `count`
	}

	$effect(() => {
		// Even though we call a function, Svelte tracks that
		// `count` was ultimately read
		console.log(`Count via function: ${getCount()}`)
	})
</script>

Isso funciona porque o rastreamento do Svelte acontece no momento da leitura, independentemente de quantas chamadas de função de profundidade você estiver.

Optando por Não Rastrear: A Função `untrack`

Às vezes você quer ler um valor sem criar uma dependência. Use a função untrack:

<script>
	import { untrack } from 'svelte'

	let logPrefix = $state('[LOG]')
	let count = $state(0)

	$effect(() => {
		// We want to re-run when `count` changes
		// but NOT when `logPrefix` changes
		const prefix = untrack(() => logPrefix)
		console.log(`${prefix} Count: ${count}`)
	})
</script>

Agora o efeito depende apenas de count. Alterar logPrefix não acionará uma re-execução.

Padrões de Limpeza

A Função de Desmontagem

Os efeitos frequentemente configuram coisas que precisam ser limpas: temporizadores, assinaturas, ouvintes de eventos, etc. A função de desmontagem (ou função de limpeza) é como você lida com isso corretamente.

O Padrão Básico

Um efeito pode retornar uma função. Essa função é executada:

Imediatamente antes de o efeito ser re-executado (para limpar a execução anterior)
Quando o componente é destruído (para limpar completamente)

<script>
	let count = $state(0)
	let interval = $state(1000)

	$effect(() => {
		// This runs when the effect starts or re-runs
		console.log(`Setting up interval: ${interval}ms`)

		const id = setInterval(() => {
			count++
		}, interval)

		// This TEARDOWN function runs before the next run or on destroy
		return () => {
			console.log(`Cleaning up interval: ${id}`)
			clearInterval(id)
		}
	})
</script>

<p>Count: {count}</p>
<button onclick={() => (interval = interval / 2)}>Faster</button>
<button onclick={() => (interval = interval * 2)}>Slower</button>

Quando você clica em "Faster":

O estado interval muda
O Svelte agenda o efeito para re-executar
A função de desmontagem é executada primeiro: clearInterval(id) limpa o intervalo antigo
O corpo do efeito é executado: um novo intervalo é criado com o novo tempo

Por que a Desmontagem é Importante

Prevenindo Vazamentos de Memória

Todo efeito que cria um temporizador, abre um socket, registra um ouvinte de eventos ou inicia um observador deve retornar uma função de desmontagem. Omiti-la vaza recursos silenciosamente — cada re-execução adiciona um novo ouvinte sem remover o antigo.

Sem a limpeza adequada, você acumulará recursos que nunca foram liberados. Aqui está um cenário comum:

RUIM: Sem limpeza

<script>
	let isActive = $state(true)

	$effect(() => {
		if (isActive) {
			// This adds a new listener every time `isActive` becomes true
			// Old listeners are NEVER removed!
			window.addEventListener('resize', handleResize)
		}
	})

	function handleResize() {
		console.log('Window resized')
	}
</script>

BOM: Limpeza adequada

<script>
	let isActive = $state(true)

	$effect(() => {
		if (!isActive) return // Guard clause

		function handleResize() {
			console.log('Window resized')
		}

		window.addEventListener('resize', handleResize)

		return () => {
			// Clean up when isActive changes or component unmounts
			window.removeEventListener('resize', handleResize)
		}
	})
</script>

Temporização da Desmontagem Visualizada

Initial Run:
┌──────────────────────────────────┐
│  Effect body runs                │
│  → setInterval(fn, 1000)         │
│  → Returns teardown function     │
└──────────────────────────────────┘

State Changes (interval becomes 500):
┌──────────────────────────────────┐
│  1. Teardown from previous run   │
│     → clearInterval(oldId)       │
├──────────────────────────────────┤
│  2. Effect body runs again       │
│     → setInterval(fn, 500)       │
│     → Returns new teardown       │
└──────────────────────────────────┘

Component Destroyed:
┌──────────────────────────────────┐
│  Teardown runs one final time    │
│  → clearInterval(currentId)      │
└──────────────────────────────────┘

Exemplos de Limpeza do Mundo Real

1: Conexão WebSocket

<script>
	let serverUrl = $state('wss://api.example.com')
	let messages = $state([])
	let status = $state('disconnected')

	$effect(() => {
		status = 'connecting'
		const socket = new WebSocket(serverUrl)

		socket.onopen = () => {
			status = 'connected'
		}

		socket.onmessage = (event) => {
			messages = [...messages, JSON.parse(event.data)]
		}

		socket.onerror = () => {
			status = 'error'
		}

		socket.onclose = () => {
			status = 'disconnected'
		}

		// CRITICAL: Clean up the connection
		return () => {
			if (socket.readyState === WebSocket.OPEN) {
				socket.close()
			}
		}
	})
</script>

<p>Status: {status}</p>
<input bind:value={serverUrl} />

Quando serverUrl muda, o WebSocket antigo é devidamente fechado antes de abrir um novo.

2: Loop de Quadro de Animação

<script>
	let isAnimating = $state(true)
	let rotation = $state(0)

	$effect(() => {
		if (!isAnimating) return

		let animationId

		function animate() {
			rotation = (rotation + 1) % 360
			animationId = requestAnimationFrame(animate)
		}

		animationId = requestAnimationFrame(animate)

		return () => {
			// Stop the animation loop
			cancelAnimationFrame(animationId)
		}
	})
</script>

<div style="transform: rotate({rotation}deg)">🌀</div>
<button onclick={() => (isAnimating = !isAnimating)}>
	{isAnimating ? 'Stop' : 'Start'}
</button>

3: ResizeObserver

<script>
	let container
	let dimensions = $state({ width: 0, height: 0 })

	$effect(() => {
		if (!container) return

		const observer = new ResizeObserver((entries) => {
			const entry = entries[0]
			dimensions = {
				width: entry.contentRect.width,
				height: entry.contentRect.height
			}
		})

		observer.observe(container)

		return () => {
			observer.disconnect()
		}
	})
</script>

<div bind:this={container} style="resize: both; overflow: auto; border: 1px solid gray;">
	<p>Width: {dimensions.width}px</p>
	<p>Height: {dimensions.height}px</p>
</div>

Limpeza Condicional

Às vezes você só precisa limpar se uma determinada condição foi atendida:

<script>
	let useWebSocket = $state(false)
	let socket = null

	$effect(() => {
		if (useWebSocket) {
			socket = new WebSocket('wss://api.example.com')

			return () => {
				socket.close()
				socket = null
			}
		}
		// If useWebSocket is false, no cleanup needed
		// because nothing was set up
	})
</script>

Evitando Loops Infinitos

A armadilha mais comum com efeitos é o loop infinito. Ele acontece quando um efeito lê e escreve no mesmo estado, criando um ciclo: a mudança aciona o efeito, o efeito causa a mudança, a mudança aciona o efeito...

O Problema

<script>
	let count = $state(0)

	// AVOID: INFINITE LOOP!
	$effect(() => {
		count = count + 1 // Reads count, then writes to count
		// This triggers the effect again... forever
	})
</script>

Por que Acontece

O efeito é executado, lê count (valor: 0)
O efeito escreve em count (agora: 1)
O Svelte detecta que count mudou
O efeito é agendado para re-executar
O efeito é executado, lê count (valor: 1)
O efeito escreve em count (agora: 2)
→ Loop infinito

A Regra de Ouro

Se você está escrevendo em um $state dentro de um efeito, e esse efeito também lê desse estado, provavelmente você está fazendo errado.

Soluções

1: Use `$derived` em vez disso

A maioria dos cenários de "calcular algo a partir do estado" deve usar $derived, não $effect:

<script>
	let items = $state([1, 2, 3, 4, 5])

	// AVOID: Using effect to compute
	let total = $state(0)
	$effect(() => {
		total = items.reduce((sum, n) => sum + n, 0) // Infinite loop potential!
	})

	// PREFERRED: Using derived
	let total = $derived(items.reduce((sum, n) => sum + n, 0))
</script>

2: Use `untrack` para Ler Sem Criar Dependência

Se você precisa ler um valor sem torná-lo uma dependência:

<script>
	import { untrack } from 'svelte'

	let history = $state([])
	let currentValue = $state(0)

	$effect(() => {
		// Read currentValue as a dependency (triggers on change)
		const value = currentValue

		// Read history without making it a dependency
		const previousHistory = untrack(() => history)

		// Now we can safely write to history
		history = [...previousHistory, value]
	})
</script>

3: Use Condições de Guarda

Verifique se uma atualização é realmente necessária antes de escrever:

<script>
	let searchTerm = $state('')
	let normalizedTerm = $state('')

	$effect(() => {
		const normalized = searchTerm.trim().toLowerCase()

		// Only update if the value actually changed
		if (normalized !== normalizedTerm) {
			normalizedTerm = normalized
		}
	})
</script>

Mas, honestamente, este exemplo deveria usar apenas $derived:

<script>
	let searchTerm = $state('')
	let normalizedTerm = $derived(searchTerm.trim().toLowerCase())
</script>

4: Separe os Estados de Leitura e Escrita

Se você realmente precisa de um efeito que modifica estado, certifique-se de que o estado que você lê é diferente do estado que você escreve:

<script>
	let inputValue = $state('') // This is what we READ
	let processedValue = $state('') // This is what we WRITE

	$effect(() => {
		// Read from inputValue
		// Write to processedValue (different state)
		processedValue = inputValue.toUpperCase()
	})
</script>

<input bind:value={inputValue} /><p>Processed: {processedValue}</p>

Novamente, isso é melhor como um $derived:

<script>
	let inputValue = $state('')
	let processedValue = $derived(inputValue.toUpperCase())
</script>

Detectando Loops Infinitos

O Svelte tem proteção integrada. Se ele detectar que um efeito está sendo executado muitas vezes em rápida sucessão, ele irá parar e lançar um erro:

Detected effect cycle

Durante o desenvolvimento, você verá isso no console junto com um stack trace apontando para o efeito problemático.

`$effect` vs `$effect.pre`: O Momento de Execução Importa

O Svelte fornece duas runes de efeito que diferem em quando elas são executadas em relação às atualizações do DOM.

`$effect`: Após as Atualizações do DOM

O $effect regular é executado após o Svelte ter aplicado as mudanças ao DOM. Isso é o que você vai querer em 90% das vezes:

<script>
	let items = $state(['a', 'b', 'c'])
	let list

	$effect(() => {
		// The DOM is already updated here
		console.log(`List has ${list.children.length} children`)
		// If we just added an item, the new <li> is already there
	})
</script>

<ul bind:this={list}>
	{#each items as item}
		<li>{item}</li>
	{/each}
</ul>

Use $effect quando você precisar:

Ler o DOM após ele ser atualizado
Medir tamanhos de elementos após mudanças de conteúdo
Aplicar operações pós-renderização
Sincronizar com bibliotecas externas que trabalham com o DOM renderizado

`$effect.pre`: Antes das Atualizações do DOM

O $effect.pre é executado antes do Svelte aplicar as mudanças ao DOM. Esta é uma ferramenta mais especializada para casos de uso específicos:

<script>
	import { tick } from 'svelte'

	let messages = $state([])
	let viewport

	$effect.pre(() => {
		if (!viewport) return

		// Reference messages to make this a dependency
		messages.length

		// Check if we're scrolled to the bottom BEFORE new messages render
		const isAtBottom = viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 20

		if (isAtBottom) {
			// Wait for DOM to update, then scroll
			tick().then(() => {
				viewport.scrollTo(0, viewport.scrollHeight)
			})
		}
	})
</script>

<div bind:this={viewport} class="chat-viewport">
	{#each messages as message}
		<p>{message}</p>
	{/each}
</div>

Por que $effect.pre é necessário aqui:

Precisamos verificar se o usuário está com o scroll no final antes de a nova mensagem ser adicionada
Se usássemos o $effect regular, a nova mensagem já estaria no DOM
Nosso cálculo de posição de scroll estaria incorreto porque a altura de scroll teria mudado

Comparação Lado a Lado

<script>
	let count = $state(0)
	let paragraph

	$effect.pre(() => {
		console.log('[PRE] Before DOM update')
		console.log('[PRE] Paragraph text:', paragraph?.textContent)
	})

	$effect(() => {
		console.log('[EFFECT] After DOM update')
		console.log('[EFFECT] Paragraph text:', paragraph?.textContent)
	})
</script>

<p bind:this={paragraph}>Count: {count}</p>
<button onclick={() => count++}>Increment</button>

Clique no botão quando count for 0:

[PRE] Before DOM update
[PRE] Paragraph text: Count: 0      ← Still shows old value!
[EFFECT] After DOM update
[EFFECT] Paragraph text: Count: 1   ← Shows new value

Quando Usar Cada Um

Cenário	Use
Medir o DOM após atualizações	`$effect`
Desenho em canvas	`$effect`
Integração com bibliotecas de terceiros	`$effect`
Analytics/logging	`$effect`
Preservação de posição de scroll	`$effect.pre`
Cálculos pré-renderização	`$effect.pre`
Comparar o DOM antigo com o novo	`$effect.pre`

Exemplo Prático: Chat com Auto-Scroll

Aqui está um exemplo completo mostrando por que $effect.pre é essencial para uma interface de chat:

<script>
	import { tick } from 'svelte'

	let messages = $state([
		{ id: 1, text: 'Hello!' },
		{ id: 2, text: 'How are you?' }
	])
	let newMessage = $state('')
	let chatContainer
	let shouldAutoScroll = $state(true)

	// Check scroll position BEFORE new content is added
	$effect.pre(() => {
		if (!chatContainer) return

		// Track messages to run when they change
		messages.length

		// Check if user is at the bottom (within 50px)
		const { scrollTop, scrollHeight, clientHeight } = chatContainer
		shouldAutoScroll = scrollHeight - scrollTop - clientHeight < 50
	})

	// Scroll AFTER new content is rendered
	$effect(() => {
		if (!chatContainer || !shouldAutoScroll) return

		// Track messages
		messages.length

		// Scroll to bottom
		chatContainer.scrollTop = chatContainer.scrollHeight
	})

	function sendMessage() {
		if (!newMessage.trim()) return

		messages = [
			...messages,
			{
				id: Date.now(),
				text: newMessage
			}
		]
		newMessage = ''
	}
</script>

<div bind:this={chatContainer} class="chat-container">
	{#each messages as msg (msg.id)}
		<div class="message">{msg.text}</div>
	{/each}
</div>

<form
	onsubmit={(e) => {
		e.preventDefault()
		sendMessage()
	}}
>
	<input bind:value={newMessage} placeholder="Type a message..." />
	<button type="submit">Send</button>
</form>

<style>
	.chat-container {
		height: 300px;
		overflow-y: auto;
		border: 1px solid #ccc;
		padding: 1rem;
	}
	.message {
		padding: 0.5rem;
		margin: 0.25rem 0;
		background: #f0f0f0;
		border-radius: 4px;
	}
</style>

Runes de Efeito Avançadas

Além de $effect e $effect.pre, o Svelte 5 fornece ferramentas adicionais para cenários específicos.

`$effect.tracking()`

Esta rune informa se o código está sendo executado dentro de um contexto de rastreamento (um efeito ou template). É útil para construir abstrações avançadas:

<script>
	console.log('In component setup:', $effect.tracking()) // false

	$effect(() => {
		console.log('In effect:', $effect.tracking()) // true
	})
</script>

<p>In template: {$effect.tracking()}</p> <!-- true -->

Caso de Uso Prático: Assinaturas Condicionais

<script>
	import { createSubscriber } from 'svelte/reactivity'

	function createMousePosition() {
		let x = $state(0)
		let y = $state(0)

		const subscribe = createSubscriber((update) => {
			function handleMove(e) {
				x = e.clientX
				y = e.clientY
				update()
			}

			window.addEventListener('mousemove', handleMove)

			return () => {
				window.removeEventListener('mousemove', handleMove)
			}
		})

		return {
			get x() {
				subscribe() // Only subscribe if in a tracking context
				return x
			},
			get y() {
				subscribe()
				return y
			}
		}
	}

	const mouse = createMousePosition()
</script>

<!-- Reading mouse.x in the template subscribes to updates --><p>Mouse: {mouse.x}, {mouse.y}</p>

`$effect.root()`

Isso cria um escopo não rastreado que não faz limpeza automática. É para casos de uso avançados onde você precisa de controle manual:

<script>
	let count = $state(0)

	// Create a root effect that we control manually
	const cleanup = $effect.root(() => {
		$effect(() => {
			console.log(`Count is: ${count}`)
		})

		// Optional: return cleanup logic
		return () => {
			console.log('Root effect cleaned up')
		}
	})

	// Later, we can manually destroy it
	function stopWatching() {
		cleanup()
	}
</script>

<p>{count}</p>
<button onclick={() => count++}>Increment</button>
<button onclick={stopWatching}>Stop Watching</button>

Quando usar $effect.root:

Criar efeitos fora da inicialização do componente
Construir utilitários reutilizáveis baseados em efeitos
Controle manual do ciclo de vida
Cenários de teste

Quando NÃO Usar `$effect`

Esta seção é crucial. Muitos desenvolvedores novos no Svelte 5 usam efeitos em excesso porque estão familiarizados com eles em outros frameworks. Mas o $derived do Svelte é frequentemente a melhor escolha.

Pergunte a si mesmo: "Estou computando um valor a partir de outros valores?"

Se sim → use $derived, Se não (você está sincronizando com algo externo) → use $effect

Anti-Padrão: Sincronizar Estado com Estado

<script>
	let count = $state(0)
	let doubled = $state()

	// AVOID: This creates unnecessary state and effect
	$effect(() => {
		doubled = count * 2
	})
</script>

Por que é ruim:

Estado extra para gerenciar
doubled fica brevemente undefined antes do efeito ser executado
Mais código, mais complexidade
O Svelte tem uma solução integrada

Faça isso em vez disso:

<script>
	let count = $state(0)
	let doubled = $derived(count * 2)
</script>

Anti-Padrão: O Problema de Sincronizar Dois Inputs

Um erro clássico é tentar manter dois inputs sincronizados:

<script>
	const total = 100
	let spent = $state(0)
	let remaining = $state(total)

	// AVOID: This creates TWO effects that trigger each other!
	$effect(() => {
		remaining = total - spent
	})

	$effect(() => {
		spent = total - remaining
	})
</script>

<label>
	Spent: <input type="number" bind:value={spent} max={total} />
</label>
<label>
	Remaining: <input type="number" bind:value={remaining} max={total} />
</label>

Por que é ruim:

Dependência circular entre efeitos
Difícil de entender qual é executado quando
Pode causar comportamento inesperado

Solução 1: Derivado + Callback

<script>
	const total = 100
	let spent = $state(0)
	let remaining = $derived(total - spent)

	function updateFromRemaining(newRemaining) {
		spent = total - newRemaining
	}
</script>

<label>
	Spent: <input type="number" bind:value={spent} max={total} />
</label>
<label>
	Remaining:
	<input
		type="number"
		value={remaining}
		oninput={(e) => updateFromRemaining(+e.target.value)}
		max={total}
	/>
</label>

Solução 2: Ligações de Função (Svelte 5.7+)

<script>
	const total = 100
	let spent = $state(0)
	let remaining = $derived(total - spent)
</script>

<label>
	Spent: <input type="number" bind:value={spent} max={total} />
</label>
<label>
	Remaining:
	<input type="number" bind:value={() => remaining, (v) => (spent = total - v)} max={total} />
</label>

Bons Casos de Uso para `$effect`

1: Desenho em Canvas

<script>
	let canvas
	let hue = $state(0)

	$effect(() => {
		const ctx = canvas.getContext('2d')
		ctx.fillStyle = `hsl(${hue}, 70%, 50%)`
		ctx.fillRect(0, 0, canvas.width, canvas.height)
	})
</script>

<canvas bind:this={canvas} width="200" height="200"></canvas>
<input type="range" bind:value={hue} min="0" max="360" />

2: Título do Documento

<script>
	let unreadCount = $state(5)

	$effect(() => {
		document.title = unreadCount > 0 ? `(${unreadCount}) My App` : 'My App'
	})
</script>

3. Sincronização com LocalStorage

<script>
	let theme = $state('light')

	// Load from localStorage on mount
	$effect(() => {
		const saved = localStorage.getItem('theme')
		if (saved) theme = saved
	})

	// Save to localStorage on change
	$effect(() => {
		localStorage.setItem('theme', theme)
	})
</script>

4. Integração com Bibliotecas de Terceiros

<script>
	import Chart from 'chart.js/auto'

	let data = $state([10, 20, 30, 40])
	let canvas
	let chart

	$effect(() => {
		if (chart) {
			// Update existing chart
			chart.data.datasets[0].data = data
			chart.update()
		} else {
			// Create new chart
			chart = new Chart(canvas, {
				type: 'bar',
				data: {
					labels: ['A', 'B', 'C', 'D'],
					datasets: [{ data }]
				}
			})
		}

		return () => {
			chart?.destroy()
			chart = null
		}
	})
</script>

<canvas bind:this={canvas}></canvas>

5: Ouvintes de Eventos em Elementos Externos

<script>
	let isEnabled = $state(true)
	let keyPressed = $state('')

	$effect(() => {
		if (!isEnabled) return

		function handleKeyDown(e) {
			keyPressed = e.key
		}

		document.addEventListener('keydown', handleKeyDown)

		return () => {
			document.removeEventListener('keydown', handleKeyDown)
		}
	})
</script>

<p>Last key: {keyPressed}</p>
<button onclick={() => (isEnabled = !isEnabled)}>
	{isEnabled ? 'Disable' : 'Enable'} listener
</button>

Exemplos Práticos

Vamos construir alguns componentes do mundo real que demonstram padrões de efeito corretamente.

1: Busca com Debounce

Um campo de busca que aguarda o usuário parar de digitar antes de pesquisar:

<script>
	let searchTerm = $state('')
	let debouncedTerm = $state('')
	let results = $state([])
	let isSearching = $state(false)

	// Debounce the search term
	$effect(() => {
		const term = searchTerm // Read the reactive value

		const timeoutId = setTimeout(() => {
			debouncedTerm = term
		}, 300)

		return () => clearTimeout(timeoutId)
	})

	// Perform the search when debounced term changes
	$effect(() => {
		const term = debouncedTerm

		if (!term) {
			results = []
			return
		}

		isSearching = true

		// Simulate API call
		const controller = new AbortController()

		fetch(`/api/search?q=${encodeURIComponent(term)}`, {
			signal: controller.signal
		})
			.then((r) => r.json())
			.then((data) => {
				results = data
				isSearching = false
			})
			.catch((err) => {
				if (err.name !== 'AbortError') {
					console.error(err)
					isSearching = false
				}
			})

		return () => controller.abort()
	})
</script>

<input bind:value={searchTerm} placeholder="Search..." />

{#if isSearching}
	<p>Searching...</p>
{:else if results.length > 0}
	<ul>
		{#each results as result}
			<li>{result.title}</li>
		{/each}
	</ul>
{:else if debouncedTerm}
	<p>No results found</p>
{/if}

2: Intersection Observer

Rastreie quando elementos entram e saem da viewport:

<script>
	let items = $state(
		Array.from({ length: 20 }, (_, i) => ({
			id: i,
			visible: false
		}))
	)

	function createVisibilityObserver(element, index) {
		const observer = new IntersectionObserver(
			(entries) => {
				entries.forEach((entry) => {
					items[index].visible = entry.isIntersecting
				})
			},
			{ threshold: 0.5 }
		)

		observer.observe(element)

		return () => observer.disconnect()
	}
</script>

<div class="scroll-container">
	{#each items as item, index (item.id)}
		{@const visible = item.visible}
		<div class="item" class:visible use:action={(node) => createVisibilityObserver(node, index)}>
			Item {item.id}
			{visible ? '👁️' : ''}
		</div>
	{/each}
</div>

<style>
	.scroll-container {
		height: 400px;
		overflow-y: auto;
	}
	.item {
		height: 100px;
		margin: 10px;
		padding: 20px;
		background: #f0f0f0;
		transition: background 0.3s;
	}
	.item.visible {
		background: #d0ffd0;
	}
</style>

3: Ouvinte de Media Query

Reaja a breakpoints responsivos:

<script>
	let breakpoint = $state('desktop')

	$effect(() => {
		const queries = {
			mobile: window.matchMedia('(max-width: 639px)'),
			tablet: window.matchMedia('(min-width: 640px) and (max-width: 1023px)'),
			desktop: window.matchMedia('(min-width: 1024px)')
		}

		function updateBreakpoint() {
			if (queries.mobile.matches) breakpoint = 'mobile'
			else if (queries.tablet.matches) breakpoint = 'tablet'
			else breakpoint = 'desktop'
		}

		// Initial check
		updateBreakpoint()

		// Listen for changes
		Object.values(queries).forEach((mq) => {
			mq.addEventListener('change', updateBreakpoint)
		})

		return () => {
			Object.values(queries).forEach((mq) => {
				mq.removeEventListener('change', updateBreakpoint)
			})
		}
	})
</script>

<p>Current breakpoint: <strong>{breakpoint}</strong></p>

{#if breakpoint === 'mobile'}
	<MobileNav />
{:else}
	<DesktopNav />
{/if}

4: Histórico de Desfazer/Refazer

Rastreie mudanças de estado e permita desfazer/refazer:

<script>
	let text = $state('')
	let history = $state([''])
	let historyIndex = $state(0)
	let isUndoRedo = false

	// Track text changes for undo/redo
	$effect(() => {
		const currentText = text

		// Don't record if this change came from undo/redo
		if (isUndoRedo) {
			isUndoRedo = false
			return
		}

		// Don't record if text hasn't changed
		if (currentText === history[historyIndex]) return

		// Truncate any "future" history and add new entry
		history = [...history.slice(0, historyIndex + 1), currentText]
		historyIndex = history.length - 1
	})

	function undo() {
		if (historyIndex > 0) {
			isUndoRedo = true
			historyIndex--
			text = history[historyIndex]
		}
	}

	function redo() {
		if (historyIndex < history.length - 1) {
			isUndoRedo = true
			historyIndex++
			text = history[historyIndex]
		}
	}

	let canUndo = $derived(historyIndex > 0)
	let canRedo = $derived(historyIndex < history.length - 1)
</script>

<textarea bind:value={text} rows="5" cols="40"></textarea>

<div class="controls">
	<button onclick={undo} disabled={!canUndo}> ↩ Undo </button>
	<button onclick={redo} disabled={!canRedo}> ↪ Redo </button>
	<span>
		Step {historyIndex + 1} of {history.length}
	</span>
</div>

5: Relógio em Tempo Real com Fuso Horário

<script>
	let timezone = $state('local')
	let time = $state(new Date())

	$effect(() => {
		// Update every second
		const intervalId = setInterval(() => {
			time = new Date()
		}, 1000)

		return () => clearInterval(intervalId)
	})

	let formattedTime = $derived.by(() => {
		const options = {
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit',
			hour12: true
		}

		if (timezone !== 'local') {
			options.timeZone = timezone
		}

		return time.toLocaleTimeString('en-US', options)
	})

	const timezones = [
		{ value: 'local', label: 'Local Time' },
		{ value: 'America/New_York', label: 'New York' },
		{ value: 'Europe/London', label: 'London' },
		{ value: 'Asia/Tokyo', label: 'Tokyo' },
		{ value: 'Australia/Sydney', label: 'Sydney' }
	]
</script>

<select bind:value={timezone}>
	{#each timezones as tz}
		<option value={tz.value}>{tz.label}</option>
	{/each}
</select>

<p class="time">{formattedTime}</p>

<style>
	.time {
		font-size: 3rem;
		font-family: monospace;
	}
</style>

Armadilhas Comuns e Como Corrigi-las

1: Efeito Executado Antes do DOM Estar Pronto

O Problema:

<script>
	let element

	$effect(() => {
		// element might be undefined here!
		element.focus()
	})
</script>

<input bind:this={element} />

A Correção: Proteja contra undefined

<script>
	let element

	$effect(() => {
		if (!element) return // Guard clause
		element.focus()
	})
</script>

2: Lendo Valores Assíncronos

O Problema:

<script>
  let userId = $state(1);
  let userName = $state('');

  $effect(() => {
    // AVOID: After the await, Svelte stops tracking
    const response = await fetch(`/api/users/${userId}`);
    const user = await response.json();
    userName = user.name;  // userId is tracked, but...
  });
</script>

A Correção: Leia de forma síncrona, depois busque

<script>
	let userId = $state(1)
	let userName = $state('')

	$effect(() => {
		// PREFERRED: Read userId synchronously (it becomes a dependency)
		const id = userId

		// Then do async work
		fetch(`/api/users/${id}`)
			.then((r) => r.json())
			.then((user) => {
				userName = user.name
			})
	})
</script>

3: Múltiplos Efeitos Quando Um Seria Suficiente

O Problema:

<script>
	let x = $state(0)
	let y = $state(0)

	// AVOID: Two separate effects for related work
	$effect(() => {
		console.log('X changed:', x)
	})

	$effect(() => {
		console.log('Y changed:', y)
	})
</script>

A Correção: Combine quando apropriado

<script>
	let x = $state(0)
	let y = $state(0)

	// PREFERRED: One effect that tracks both
	$effect(() => {
		console.log('Coordinates changed:', x, y)
	})
</script>

4: Não Limpar Assinaturas

O Problema:

<script>
	let topic = $state('news')

	$effect(() => {
		// AVOID: Never cleaned up! When topic changes, old subscription remains
		socket.subscribe(topic, handleMessage)
	})
</script>

A Correção: Retorne uma função de limpeza

<script>
	let topic = $state('news')

	$effect(() => {
		socket.subscribe(topic, handleMessage)

		// PREFERRED: Clean up before re-subscribing
		return () => {
			socket.unsubscribe(topic, handleMessage)
		}
	})
</script>

5: Effect Dentro de um Loop

O Problema:

<script>
	let items = $state([{ id: 1 }, { id: 2 }])

	// AVOID: This runs once when items changes, NOT per item
	$effect(() => {
		items.forEach((item) => {
			console.log('Processing:', item.id)
		})
	})
</script>

A Correção: Use componente por item ou rastreie propriedades específicas

<!-- PREFERRED: Each item gets its own component with its own effects -->
{#each items as item (item.id)}
	<ItemComponent data={item} />
{/each}

`onMount` vs `$effect` para Código de Inicialização

onMount continua totalmente suportado no Svelte 5 e frequentemente é a escolha mais clara para inicializações únicas que não dependem de estado reativo.

Use onMount quando:

A inicialização ocorre uma única vez e não depende de valores reativos
Você quer semântica explícita de "executar na montagem"
O código é mais fácil de entender como um evento de ciclo de vida

<script>
	import { onMount } from 'svelte'

	// PREFERRED: one-time setup, no dependencies
	onMount(() => {
		const interval = setInterval(doSomething, 1000)
		return () => clearInterval(interval)
	})
</script>

Use $effect quando:

A inicialização depende de estado reativo e deve ser reexecutada quando ele muda
Você precisa que o comportamento reaja a mudanças de estado

<script>
	let intervalMs = $state(1000)

	// PREFERRED: re-runs when intervalMs changes
	$effect(() => {
		const interval = setInterval(doSomething, intervalMs)
		return () => clearInterval(interval)
	})
</script>

A diferença principal: onMount executa exatamente uma vez. $effect executa na montagem e reexecuta quando as dependências mudam. Escolha com base em se você precisa de reatividade, não com base no que "parece mais Svelte 5."

Referência Rápida

Tipos de Effect

Rune	Quando Executa	Caso de Uso
`$effect`	Após atualizações do DOM	Canvas, libs externas, medições
`$effect.pre`	Antes das atualizações do DOM	Posição de scroll, cálculos pré-renderização
`$effect.root`	Controle manual	Effects fora de componentes, testes

Padrão de Limpeza

$effect(() => {
  // Setup code here
  const resource = createResource();

  // Return cleanup function
  return () => {
    resource.destroy();
  };
});

Rastreamento de Dependências

import { untrack } from 'svelte';

$effect(() => {
  // This IS tracked (effect runs when `tracked` changes)
  const value = tracked;

  // This is NOT tracked
  const other = untrack(() => untracked);
});

Erros Comuns a Evitar

❌ Não faça	✅ Faça
Computar valores derivados em effects	Use `$derived`
Esquecer funções de limpeza	Sempre limpe timers, listeners e assinaturas
Escrever no estado que você está lendo	Use `untrack` ou estados separados
Usar effects para sincronização de estado	Use `$derived` ou callbacks
Ignorar o conselho de que "effects são saídas de emergência"	Prefira soluções declarativas

Árvore de Decisão

Need to compute something from state?
├── Yes → Use $derived
└── No → Need to sync with external system?
    ├── Yes → Use $effect
    │   ├── Need to run before DOM? → Use $effect.pre
    │   └── Need cleanup? → Return a function
    └── No → You probably don't need an effect

Principais Conclusões

Effects são para sincronização externa, não para computar valores. Use $derived para computações.
As dependências são rastreadas automaticamente ao ler valores reativos de forma síncrona.
Sempre forneça limpeza ao configurar timers, listeners ou assinaturas.
Evite loops infinitos não escrevendo no estado que você está lendo (ou use untrack).
Use $effect.pre somente quando precisar ler o estado do DOM antes das atualizações.
Effects executam após a montagem e após as atualizações do DOM — você pode acessar elementos com segurança.
Effects não executam no servidor — APIs exclusivas do navegador são seguras para usar.
Prefira onMount para inicializações únicas sem dependências reativas; use $effect quando a inicialização precisa reagir a mudanças de estado.

Domine esses padrões e você construirá aplicações Svelte 5 que são limpas, eficientes e livres dos bugs sutis que assolam bases de código repletas de effects.

Padrões de Ciclo de Vida e Limpeza no Svelte 5

O que são efeitos

Por que isso é importante?

O que é um Efeito e Por que Precisamos Dele?

O Conceito: Conectando Dois Mundos

A Definição

Efeitos São uma "Saída de Emergência"

Quando os Efeitos São Executados: O Ciclo de Vida

A Execução Inicial: Após a Montagem

Re-execuções: Em uma Microtarefa

Após as Atualizações do DOM

Renderização do Lado do Servidor: Efeitos Não São Executados

Linha do Tempo Visual

Entendendo as Dependências

O que é Rastreado

A Regra Básica

O Rastreamento Acontece em Tempo de Execução

O Requisito de Sincronicidade

Rastreamento de Objeto vs Propriedade

Rastreamento Através de Chamadas de Função

Optando por Não Rastrear: A Função untrack

Padrões de Limpeza

A Função de Desmontagem

O Padrão Básico

Por que a Desmontagem é Importante

Prevenindo Vazamentos de Memória

Temporização da Desmontagem Visualizada

Exemplos de Limpeza do Mundo Real

1: Conexão WebSocket

2: Loop de Quadro de Animação

3: ResizeObserver

Limpeza Condicional

Evitando Loops Infinitos

O Problema

Por que Acontece

A Regra de Ouro

Soluções

1: Use $derived em vez disso

2: Use untrack para Ler Sem Criar Dependência

3: Use Condições de Guarda

4: Separe os Estados de Leitura e Escrita

Detectando Loops Infinitos

$effect vs $effect.pre: O Momento de Execução Importa

$effect: Após as Atualizações do DOM

$effect.pre: Antes das Atualizações do DOM

Comparação Lado a Lado

Quando Usar Cada Um

Exemplo Prático: Chat com Auto-Scroll

Runes de Efeito Avançadas

$effect.tracking()

$effect.root()

Quando NÃO Usar $effect

Anti-Padrão: Sincronizar Estado com Estado

Anti-Padrão: O Problema de Sincronizar Dois Inputs

Solução 1: Derivado + Callback

Solução 2: Ligações de Função (Svelte 5.7+)

Bons Casos de Uso para $effect

Exemplos Práticos

1: Busca com Debounce

2: Intersection Observer

3: Ouvinte de Media Query

4: Histórico de Desfazer/Refazer

5: Relógio em Tempo Real com Fuso Horário

Armadilhas Comuns e Como Corrigi-las

1: Efeito Executado Antes do DOM Estar Pronto

2: Lendo Valores Assíncronos

3: Múltiplos Efeitos Quando Um Seria Suficiente

4: Não Limpar Assinaturas

5: Effect Dentro de um Loop

onMount vs $effect para Código de Inicialização

Referência Rápida

Tipos de Effect

Padrão de Limpeza

Rastreamento de Dependências

Erros Comuns a Evitar

Árvore de Decisão

Principais Conclusões

Veja Também

Documentação Oficial

Recursos Externos

Optando por Não Rastrear: A Função `untrack`

1: Use `$derived` em vez disso

2: Use `untrack` para Ler Sem Criar Dependência

`$effect` vs `$effect.pre`: O Momento de Execução Importa

`$effect`: Após as Atualizações do DOM

`$effect.pre`: Antes das Atualizações do DOM

`$effect.tracking()`

`$effect.root()`

Quando NÃO Usar `$effect`

Bons Casos de Uso para `$effect`

`onMount` vs `$effect` para Código de Inicialização