As Seis Essenciais

O Svelte 5 introduziu as runas — símbolos especiais que tornam a reatividade explícita. A documentação lista mais de uma dúzia delas. A internet está cheia de tutoriais cobrindo cada variação.

Aqui está a verdade: você precisa de seis.

Não seis para começar. Não seis para iniciantes. Seis, ponto final. Você pode construir aplicações em produção com apenas essas seis runas. Todo o resto é ou uma otimização que você ainda não precisa ou um recurso de nicho que talvez nunca precise.

Vamos passar por elas.

`$state` — Propriedade Local

$state torna um valor reativo ao envolvê-lo e rastrear as mudanças. Quando o valor muda, tudo que o utiliza é atualizado automaticamente.

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

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

$state funciona com qualquer tipo de valor: strings, números, booleanos, arrays, objetos.

O Svelte também rastreia mutações profundas. Você pode alterar propriedades de objetos ou itens em arrays diretamente:

<script>
	let todos = $state([{ text: 'Learn runes', done: false }])

	function toggle(todo) {
		todo.done = !todo.done // This just works
	}
</script>

Sem operadores spread. Sem padrões de atualização imutável. Apenas mute diretamente.

`$derived` — Valores Computados

Use $derived para valores calculados a partir de outro estado. Esses valores não podem ser mutados de forma independente — eles sempre refletem suas dependências.

<script>
	let todos = $state([
		{ text: 'Learn runes', done: false },
		{ text: 'Build something', done: false }
	])

	let remaining = $derived(todos.filter((t) => !t.done).length)
</script>

<p>{remaining} left to do</p>

$derived rastreia dependências automaticamente. Quando todos muda, remaining é atualizado.

`$derived.by` — Transformações Agrupadas

$derived.by permite que você defina valores derivados como funções, o que é útil para computações mais complexas:

<script>
	let count = $state(1)

	let summary = $derived.by(() => ({
		double: count * 2,
		triple: count * 3
	}))
</script>

<p>{summary.double}, {summary.triple}</p>

Outro exemplo: calcular estatísticas a partir de um array.

<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>

Regra geral:

Se um valor pode ser computado a partir de outros valores, use $derived. Não o armazene em $state tentando mantê-lo sincronizado — isso é um bug esperando para acontecer.

`$props` — Receber Dados do Pai

$props declara quais dados seu componente aceita de seu pai. Sem dependências ocultas — todas as entradas são visíveis e previsíveis.

<!-- Button.svelte -->
<script>
	let { label, onclick, disabled = false } = $props()
</script>

<button {onclick} {disabled}>
	{label}
</button>

Use desestruturação para extrair props individuais. Valores padrão funcionam naturalmente.

Do componente pai:

<Button label="Save" onclick={save} />
<Button label="Cancel" onclick={cancel} disabled={saving} />

`$bindable` — Permitir Vinculação Bidirecional

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

<input bind:value />

$bindable marca uma prop como vinculável bidirecionalmente. O pai pode então usar bind::

<script>
	let name = $state('')
</script>

<TextInput bind:value={name} /><p>Hello, {name}</p>

Use com moderação. A maioria das props deve fluir em uma direção. A vinculação bidirecional faz sentido para entradas de formulário e pouco mais.

`$effect` — Executar Efeitos Colaterais (Raramente)

<script>
	let title = $state('My App')

	$effect(() => {
		document.title = title
	})
</script>

<input bind:value={title} />

$effect executa código quando suas dependências mudam. É para efeitos colaterais: coisas que alcançam fora do seu componente, como manipulação do DOM, análises ou assinaturas.

Importante: Na maior parte do tempo, você não precisa de $effect. Se você o está usando para sincronizar estado, provavelmente quer $derived. Se o está usando para buscar dados, provavelmente quer uma função load.

A limpeza funciona retornando uma função:

<script>
	let enabled = $state(true)

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

		const id = setInterval(() => console.log('tick'), 1000)
		return () => clearInterval(id) // Cleanup
	})
</script>

`$inspect` — Depurar Reatividade

<script>
	let count = $state(0)

	$inspect(count) // Logs whenever count changes
</script>

$inspect é um console.log que entende reatividade. Ele é re-executado sempre que o valor muda, mostrando exatamente quando e por que as atualizações acontecem.

Para tratamento personalizado:

<script>
	let data = $state({ x: 1, y: 2 })

	$inspect(data).with((type, value) => {
		if (type === 'update') debugger
	})
</script>

Remova antes de ir para produção. É uma ferramenta de desenvolvimento.

É Isso

Seis runas:

Runa	Propósito
`$state`	Tornar um valor reativo
`$derived`	Computar a partir de outros valores
`$props`	Receber dados do pai
`$bindable`	Permitir vinculação bidirecional
`$effect`	Executar efeitos colaterais (raramente)
`$inspect`	Depurar reatividade

Sim, o Svelte tem mais. $state.raw para otimização de desempenho. $effect.pre para executar antes das atualizações do DOM. $props.id para gerar IDs únicos. Você pode aprender esses quando precisar.

Mas essas seis? Essas são suficientes para construir qualquer coisa. Aplicações em produção foram construídas com nada mais.

O objetivo não é conhecer cada recurso. O objetivo é construir coisas que funcionem e permaneçam simples. Essas seis runas são tudo que você precisa para isso.

A seguir: vamos falar sobre como pensar com essas ferramentas — por que o fluxo de dados importa mais do que o ciclo de vida, e como essa mudança previne categorias inteiras de bugs.

As Seis Essenciais

$state — Propriedade Local

$derived — Valores Computados

$derived.by — Transformações Agrupadas

$props — Receber Dados do Pai

$bindable — Permitir Vinculação Bidirecional

$effect — Executar Efeitos Colaterais (Raramente)

$inspect — Depurar Reatividade