Introdução à Reatividade do Svelte 5

O Svelte 5 introduziu uma abordagem revolucionária à reatividade com as runes. Este guia fornece uma visão geral de como a reatividade funciona no Svelte 5 e apresenta as runes que tornam tudo isso possível. Para tutoriais aprofundados sobre cada rune, siga os links ao longo deste artigo.

Experimente o Svelte 5 no REPL

O Que Você Deve Saber

Antes de mergulhar de cabeça, certifique-se de que está confortável com esses conceitos de JavaScript:

Variáveis: let, const e como elas diferem
Objetos e Arrays: Criar, acessar e modificá-los
Funções: Como definir e chamar funções
Arrow Functions: A sintaxe () => {}
Conceitos básicos de DOM: O que acontece quando uma página web é atualizada

Se você não tem certeza sobre algum desses itens, tudo bem! Os tutoriais individuais de runes explicam as coisas à medida que avançam, mas ter essa base vai ajudar.

Por Que a Reatividade Importa

O Problema: Manter a UI Sincronizada com os Dados

Imagine que você está construindo um contador simples. Em JavaScript puro, você escreveria algo assim:

<button id="btn">Clicks: 0</button>

<script>
	let count = 0
	const button = document.getElementById('btn')

	button.addEventListener('click', () => {
		count++
		button.textContent = `Clicks: ${count}` // Manual update!
	})
</script>

Percebe o problema? Toda vez que count muda, você precisa manualmente atualizar o texto do botão. Em um exemplo simples, isso é aceitável. Mas imagine um app complexo com dezenas de variáveis afetando centenas de elementos de UI. Você gastaria mais tempo escrevendo código de atualização do que funcionalidades reais!

A Solução: Programação Reativa

Reatividade significa que a UI se atualiza automaticamente quando seus dados mudam. Você apenas muda os dados e o framework cuida do resto.

Pense como uma planilha: Quando você muda a célula A1, qualquer fórmula que referencia A1 recalcula automaticamente. Você não atualiza cada célula manualmente — o Excel faz isso por você.

O Svelte funciona da mesma forma. Você muda uma variável e qualquer parte da UI que usa essa variável é atualizada automaticamente:

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

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

Sem atualizações manuais do DOM. Sem event listeners para gerenciar. Apenas mude os dados e o Svelte cuida do resto.

A reatividade do Svelte é "de grão fino", o que significa que apenas as partes do DOM que precisam ser atualizadas são modificadas. Clicar no botão acima só atualiza o nó de texto — o próprio elemento do botão não é re-renderizado.

O Que São Runes?

No Svelte 5, runes são símbolos especiais (começando com $) que dizem ao Svelte como lidar com a reatividade. A palavra "rune" vem de símbolos antigos com propriedades mágicas — bastante apropriado, já que elas adicionam "magia" às suas variáveis!

Visual: Como as Runes Transformam Seu Código

You write:                    Svelte compiles to:
───────────────────────────────────────────────────
let count = $state(0)    →    let count = signal(0)

let doubled = $derived(  →    let doubled = computed(
  count * 2                     () => count * 2
)                             )

$effect(() => {          →    effect(() => {
  console.log(count)            console.log(count)
})                            })

Runes são diretivas de compilador — elas dizem ao compilador do Svelte como transformar seu código em JavaScript reativo e eficiente.

Referência Completa de Runes

Aqui estão todas as runes principais e o que elas fazem:

Rune	Propósito	Exemplo de Uso	Saiba Mais
`$state`	Cria estado reativo (dados que disparam atualizações na UI)	Entrada do usuário, contadores, toggles	Tutorial
`$state.raw`	Cria estado reativo superficial (para desempenho)	Arrays grandes de APIs	Tutorial
`$state.snapshot`	Obtém uma cópia simples e não reativa do estado	Logs, requisições de API	Tutorial
`$derived`	Cria valores computados a partir de uma única expressão	Totais, strings formatadas	Tutorial
`$derived.by`	Cria valores computados com lógica complexa (múltiplas instruções)	Cálculos complexos, filtragem	Tutorial
`$effect`	Executa efeitos colaterais quando as dependências mudam	Analytics, localStorage	Tutorial
`$effect.pre`	Executa antes das atualizações do DOM	Salvar posição de scroll	Tutorial
`$props`	Declara as props de um componente	Entradas do componente	Tutorial
`$bindable`	Torna uma prop vinculável em dois sentidos	Inputs de formulário, controles personalizados	Tutorial
`$inspect`	Helper de depuração para registrar mudanças em valores reativos	Depuração durante desenvolvimento	Tutorial
`$host`	Acessa o host de um elemento customizado	Web components	Tutorial

Visão Geral Rápida de Cada Rune

`$state` — Estado Reativo

A base da reatividade do Svelte 5. Use $state para criar variáveis que disparam atualizações na UI quando alteradas:

<script>
	let count = $state(0)
	let user = $state({ name: 'Alice', age: 30 })
	let items = $state(['apple', 'banana'])
</script>

<button onclick={() => count++}>Count: {count}</button><p>Name: {user.name}</p>

Objetos e arrays são profundamente reativos — alterações em propriedades aninhadas disparam atualizações automaticamente. Para conjuntos de dados grandes que você substitui inteiramente, use $state.raw para melhor desempenho.

Use $state.raw para arrays com 1000+ itens que você substitui inteiramente (como respostas de API). É de 3 a 5 vezes mais rápido do que o uso de proxy profundo.

`$derived` — Valores Computados

Cria valores que recalculam automaticamente quando suas dependências mudam:

<script>
	let price = $state(100)
	let quantity = $state(2)
	let total = $derived(price * quantity)
</script>

<p>Total: ${total}</p>

Para computações complexas com múltiplas instruções, use $derived.by:

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

	let stats = $derived.by(() => {
		const sum = items.reduce((a, b) => a + b, 0)
		const avg = sum / items.length
		return { sum, avg }
	})
</script>

<p>Sum: {stats.sum}, Average: {stats.avg}</p>

Valores derivados são automaticamente memoizados — eles só recalculam quando as dependências mudam, tornando-os perfeitos para computações custosas.

`$effect` — Efeitos Colaterais

Executa código quando as dependências reativas mudam. Perfeito para sincronizar com sistemas externos, fazer logs ou qualquer operação que não deva fazer parte da renderização:

<script>
	let count = $state(0)

	$effect(() => {
		console.log('Count changed to:', count)
		document.title = `Count: ${count}`
	})
</script>

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

Na maioria das vezes você não precisa de $effect! Se você está computando um valor a partir de outros valores, use $derived. Use $effect apenas para efeitos colaterais como chamadas de API, localStorage ou integração com código que não é Svelte.

`$props` — Props do Componente

Declara quais dados um componente recebe do seu pai:

<script>
	let { name, age = 0 } = $props()
</script>

<p>{name} is {age} years old</p>

`$bindable` — Vinculação Bidirecional

Torna uma prop capaz de vinculação bidirecional, permitindo que componentes filhos atualizem o estado do pai:

<!-- TextInput.svelte -->
<script>
	let { value = $bindable() } = $props()
</script>

<input bind:value />

<!-- Parent.svelte -->
<script>
	import TextInput from './TextInput.svelte'
	let name = $state('')
</script>

<TextInput bind:value={name} /><p>You typed: {name}</p>

Onde Você Pode Usar Runes?

Runes funcionam em:

Local	Funciona?	Observações
Arquivos de componente `.svelte`	✅	Tanto em `<script>` quanto no template
Arquivos `.svelte.js` / `.svelte.ts`	✅	Para estado reativo compartilhado
Arquivos `.js` / `.ts` comuns	❌	O compilador não processa esses arquivos

Isso ocorre porque as runes são transformadas pelo compilador do Svelte. Arquivos JavaScript comuns não são processados pelo compilador, portanto as runes não funcionarão neles.

Svelte 4 vs Svelte 5: Guia de Migração

Se você está vindo do Svelte 4, veja como a sintaxe mudou:

Gerenciamento de Estado

Svelte 4	Svelte 5
`let count = 0`	`let count = $state(0)`
`$: double = count * 2`	`let double = $derived(count * 2)`
`$: { console.log(count) }`	`$effect(() => { console.log(count) })`
`$: if (count > 10) {...}`	`$effect(() => { if (count > 10) {...} })`

API de Componentes

Svelte 4	Svelte 5
`export let name`	`let { name } = $props()`
`export let value`	`let { value = $bindable() } = $props()`
`on:click={handler}`	`onclick={handler}`
`<slot />`	`{@render children()}`

Ciclo de Vida

Svelte 4	Svelte 5
`onMount(() => {...})`	`$effect(() => {...})`
`beforeUpdate(() => {...})`	`$effect.pre(() => {...})`
`afterUpdate(() => {...})`	`$effect(() => {...})`
`onDestroy(() => {...})`	`$effect(() => { return () => {...} })`

Guia Completo de Migração

Recomendações de Trilha de Aprendizado

Para Iniciantes Completos

Tutorial de $state - Comece aqui! Domine o estado reativo
Tutorial de $derived - Aprenda valores computados
Tutorial de $props - Comunicação entre componentes
Construa um pequeno projeto para praticar!

Para Desenvolvedores React/Vue

Reatividade Granular - Você está aqui!
Tutorial de $state - Compare com useState/ref
Tutorial de $derived - Compare com useMemo/computed
Tutorial de $effect - Compare com useEffect/watchEffect

Para Desenvolvedores Svelte 4

Guia de Migração - Guia oficial
Tutorial de $state - Substitua declarações reativas
Tutorial de $effect - Substitua hooks de ciclo de vida
Tutorial de $props - Novo sistema de props

Para Padrões Avançados

Padrões Avançados de Props - Rest props, genéricos
Tutorial de $host - Web components
Tutorial de $inspect - Depuração avançada

Referência Rápida & Padrões Comuns

1. Contador com Múltiplas Operações

<script>
	let count = $state(0)
	let step = $state(1)
	let total = $derived(count * step)
</script>

<button onclick={() => (count += step)}>Add {step}</button>
<button onclick={() => (count -= step)}>Subtract {step}</button>
<button onclick={() => (count = 0)}>Reset</button>

<input type="number" bind:value={step} />

<p>Count: {count}</p>
<p>Total: {total}</p>

2. Formulário com Validação

<script>
	let email = $state('')
	let password = $state('')

	let isValidEmail = $derived(email.includes('@'))
	let isValidPassword = $derived(password.length >= 8)
	let canSubmit = $derived(isValidEmail && isValidPassword)
</script>

<input bind:value={email} type="email" />
{#if !isValidEmail && email}
	<span class="error">Invalid email</span>
{/if}

<input bind:value={password} type="password" />
{#if !isValidPassword && password}
	<span class="error">Password too short</span>
{/if}

<button disabled={!canSubmit}>Submit</button>

3. Busca de Dados

<script>
	let userId = $state(1)
	let user = $state(null)
	let loading = $state(false)

	$effect(() => {
		// Capture userId synchronously so it becomes a tracked dependency
		const id = userId
		const controller = new AbortController()

		loading = true
		fetch(`/api/users/${id}`, { signal: controller.signal })
			.then((r) => r.json())
			.then((data) => {
				user = data
				loading = false
			})
			.catch((err) => {
				if (err.name !== 'AbortError') loading = false
			})

		// Cancel the previous request when userId changes before it resolves
		return () => controller.abort()
	})
</script>

<input type="number" bind:value={userId} />

{#if loading}
	<p>Loading...</p>
{:else if user}
	<p>{user.name}</p>
{/if}

4. Sincronização com Local Storage

<script>
	let theme = $state(localStorage.getItem('theme') ?? 'light')

	$effect(() => {
		localStorage.setItem('theme', theme)
		document.body.className = theme
	})
</script>

<button onclick={() => (theme = theme === 'light' ? 'dark' : 'light')}> Toggle Theme </button>

Árvore de Decisão: Qual Rune Usar?

Need to store data that changes?
  ↓
  YES → Use $state

Need to compute a value from other values?
  ↓
  YES → Use $derived (or $derived.by for complex logic)

Need to sync with external system (API, localStorage, etc.)?
  ↓
  YES → Use $effect

Receiving data from parent component?
  ↓
  YES → Use $props

Need child to update parent's data?
  ↓
  YES → Use $bindable (or callback props)

Need to debug reactive values?
  ↓
  YES → Use $inspect

Principais Conclusões

O sistema de runes do Svelte 5 oferece uma maneira poderosa e intuitiva de construir aplicações reativas:

$state para dados reativos
$derived para valores computados
$effect para efeitos colaterais
$props para comunicação entre componentes
$bindable para binding bidirecional

A sintaxe é limpa, próxima do JavaScript puro, e o compilador cuida de toda a complexidade nos bastidores. Comece com $state e $derived, e você terá tudo o que precisa para a maioria das aplicações.

Introdução à Reatividade do Svelte 5

O Que Você Deve Saber

Por Que a Reatividade Importa

O Problema: Manter a UI Sincronizada com os Dados

A Solução: Programação Reativa

O Que São Runes?

Visual: Como as Runes Transformam Seu Código

Referência Completa de Runes

Visão Geral Rápida de Cada Rune

`$state` — Estado Reativo

`$derived` — Valores Computados

`$effect` — Efeitos Colaterais

`$props` — Props do Componente

`$bindable` — Vinculação Bidirecional

Onde Você Pode Usar Runes?

Svelte 4 vs Svelte 5: Guia de Migração

Gerenciamento de Estado

API de Componentes

Ciclo de Vida

Recomendações de Trilha de Aprendizado

Para Iniciantes Completos

Para Desenvolvedores React/Vue

Para Desenvolvedores Svelte 4

Para Padrões Avançados

Referência Rápida & Padrões Comuns

1. Contador com Múltiplas Operações

2. Formulário com Validação

3. Busca de Dados

4. Sincronização com Local Storage

Árvore de Decisão: Qual Rune Usar?

Principais Conclusões

Veja Também

Documentação Oficial

Artigos Relacionados Nesta Série

Recursos Externos

Introdução à Reatividade do Svelte 5

O Que Você Deve Saber

Por Que a Reatividade Importa

O Problema: Manter a UI Sincronizada com os Dados

A Solução: Programação Reativa

O Que São Runes?

Visual: Como as Runes Transformam Seu Código

Referência Completa de Runes

Visão Geral Rápida de Cada Rune

$state — Estado Reativo

$derived — Valores Computados

$effect — Efeitos Colaterais

$props — Props do Componente

$bindable — Vinculação Bidirecional

Onde Você Pode Usar Runes?

Svelte 4 vs Svelte 5: Guia de Migração

Gerenciamento de Estado

API de Componentes

Ciclo de Vida

Recomendações de Trilha de Aprendizado

Para Iniciantes Completos

Para Desenvolvedores React/Vue

Para Desenvolvedores Svelte 4

Para Padrões Avançados

Referência Rápida & Padrões Comuns

1. Contador com Múltiplas Operações

2. Formulário com Validação

3. Busca de Dados

4. Sincronização com Local Storage

Árvore de Decisão: Qual Rune Usar?

Principais Conclusões

Veja Também

Documentação Oficial

Artigos Relacionados Nesta Série

Recursos Externos

`$state` — Estado Reativo

`$derived` — Valores Computados

`$effect` — Efeitos Colaterais

`$props` — Props do Componente

`$bindable` — Vinculação Bidirecional