Por Que Variáveis Não São Suficientes

Se você vem do JavaScript puro, pode esperar que alterar uma variável atualize automaticamente tudo que a utiliza. Em programas baseados em console ou scripts simples, esse modelo mental funciona bem — você muda um valor e, na próxima vez que o referencia, obtém o novo valor.

Mas as UIs web são diferentes. O HTML que você vê na tela é um instantâneo dos seus dados em um momento específico no tempo. Quando você altera uma variável JavaScript, o navegador não sabe que deveria olhar novamente para aquele HTML e atualizá-lo. Há uma desconexão fundamental entre o estado do seu JavaScript e o que os usuários veem.

Esta lição explica essa desconexão, por que ela existe e como a rune $state do Svelte preenche essa lacuna para criar interfaces de usuário verdadeiramente reativas.

O Que Você Vai Aprender

Por que variáveis comuns não disparam atualizações na UI
O que "reatividade" significa no Svelte
Como a rune $state cria estado reativo

O Problema: Variáveis Estáticas

Vamos experimentar essa desconexão em primeira mão criando um contador simples com JavaScript puro. Este exemplo mostrará exatamente por que variáveis comuns não funcionam para construir UIs interativas.

<!-- filename: src/routes/+page.svelte -->
<script>
	let count = 0

	function increment() {
		count = count + 1
		console.log(count) // This logs correctly!
	}
</script>

<p>Count: {count}</p>
<button onclick={increment}>Add One</button>

O Que Acontece Quando Você Executa Isso

Renderização inicial: O Svelte lê count (que é 0) e coloca "Count: 0" no HTML
Você clica no botão: A função increment é executada
A variável muda: count se torna 1, depois 2, depois 3...
O console confirma: Verifique o console do seu navegador — você verá os números aumentando
Mas a página permanece congelada: O display ainda mostra "Count: 0"

Isso é confuso! A variável count está claramente mudando (podemos ver no console), mas o número na página nunca é atualizado. Por quê?

O Problema Central

O problema é que variáveis JavaScript não estão conectadas ao DOM. Quando o Svelte renderiza seu componente pela primeira vez, ele lê o valor de count e escreve "Count: 0" no HTML. Depois disso, o Svelte não tem ideia de que count existe ou que pode mudar.

Pense nisso como tirar uma foto: a foto captura como as coisas estavam em um determinado momento. Se alguém se mover depois que você tirar a foto, ela não se atualiza magicamente para mostrar a nova posição. Da mesma forma, o HTML capturou o valor de count em um momento (quando a página carregou) e não tem como saber que a variável mudou depois.

Por Que Isso Acontece

Para entender por que variáveis comuns não atualizam a UI, você precisa entender como o Svelte (e a maioria dos frameworks de UI) funciona por baixo dos panos.

O Processo de Renderização

Quando o Svelte compila seu componente:

Tempo de build: O Svelte analisa seu código e gera JavaScript otimizado
Runtime (carregamento da página): Seu componente é executado, as variáveis são inicializadas e o HTML inicial é criado
Exibição: O navegador mostra esse HTML aos usuários
Depois disso: O JavaScript continua sendo executado, mas o HTML já foi renderizado

Quando você clica no botão e altera count, isso acontece na etapa 4 — depois que o HTML já está na tela. O navegador não tem ideia de que deveria executar novamente o processo de renderização.

Variáveis JavaScript São "Silenciosas"

Variáveis JavaScript comuns não anunciam quando mudam. Não há um mecanismo embutido onde uma variável diz "Ei! Acabei de mudar de 0 para 1!" Simplesmente não é assim que o JavaScript funciona.

Considere este código:

let count = 0
count = 1 // Nothing "listens" to this change

A atribuição acontece, o novo valor é armazenado, mas não há evento, nenhuma notificação, nenhuma forma de outro código detectar a mudança automaticamente.

A Analogia do Quadro Branco

Pense assim: você escreve um número em um quadro branco. Outra pessoa copia esse número em um papel. Mais tarde, você apaga e escreve um novo número no quadro branco. O papel ainda mostra o número antigo — ele não se atualiza magicamente só porque o quadro branco mudou.

O quadro branco é sua variável JavaScript. O papel é o HTML exibido aos usuários. Alterar o quadro branco (variável) não muda automaticamente o papel (DOM).

O Que o Svelte Precisa

O Svelte precisa de um sinal que diga "este valor mudou, atualize a UI." Ele precisa de estado reativo — variáveis que possam transmitir suas mudanças para que o Svelte saiba quando atualizar o DOM. É exatamente isso que a rune $state fornece.

A Solução: `$state`

O Svelte 5 introduz runes — instruções especiais que dizem ao Svelte como lidar com os dados. Uma delas é a rune $state, que cria estado reativo:

<!-- filename: src/routes/+page.svelte -->

<script>
	let count = $state(0)

	function increment() {
		count = count + 1
	}
</script>

<p>Count: {count}</p>
<button onclick={increment}>Add One</button>

Você pode testá-la no Svelte REPL

Agora clique no botão. O display é atualizado: 1, 2, 3, 4...

A única mudança foi envolver 0 em $state(). Essa única adição diz ao Svelte: "Observe esta variável. Quando ela mudar, atualize tudo que a utiliza."

Como o `$state` Funciona

Agora vamos dar uma olhada nos bastidores e entender o que o $state realmente faz para que a reatividade funcione.

A Magia do `$state`

Quando você escreve let count = $state(0):

O Svelte cria um sinal reativo inicializado com 0 — este é um wrapper especial em torno do seu valor
O Svelte examina seu template e rastreia todos os lugares onde count é usado (como em <p>Count: {count}</p>)
O Svelte configura uma assinatura — quando count muda, o Svelte sabe quais partes do DOM precisam ser atualizadas
Quando você atribui um novo valor a count (como count = count + 1), o Svelte intercepta essa atribuição
O Svelte atualiza o DOM — mas apenas as partes específicas que usam count, não a página inteira

Você Ainda Escreve JavaScript Normal

A beleza do $state é que você usa count exatamente como uma variável normal:

<script>
	let count = $state(0)

	// Read it like normal
	console.log(count) // 0

	// Assign to it like normal
	count = 5

	// Use it in expressions like normal
	let doubled = count * 2
</script>

Você não precisa chamar métodos especiais de getter/setter. Não precisa envolver cada leitura e escrita em chamadas de função. A reatividade acontece automaticamente nos bastidores, graças ao compilador do Svelte.

Atualizações Eficientes

Um detalhe crucial: quando count muda, o Svelte não re-renderiza todo o seu componente. Ele atualiza apenas os nós do DOM específicos que exibem count. Isso torna as aplicações Svelte incrivelmente rápidas.

Se você tem:

<h1>Welcome to BookIt</h1><p>Count: {count}</p><footer>© 2025 BookIt</footer>

Alterar count atualiza apenas a tag <p>, não o cabeçalho ou o rodapé. O Svelte sabe exatamente o que precisa mudar.

E o BookIt?

Agora vamos conectar esse conceito à aplicação BookIt que você está construindo. Entender a reatividade é essencial para criar o formulário de reserva.

Os Requisitos do Formulário de Reserva

O BookIt precisa de um formulário de reserva onde os usuários:

Digitem seu nome
Insiram seu endereço de e-mail
Selecionem um serviço em um menu suspenso
Escolham uma data e horário
Vejam uma prévia ao vivo dos detalhes da reserva enquanto preenchem

Esse último requisito — prévia ao vivo — só é possível com estado reativo.

Sem Estado Reativo

Imagine construir o formulário com variáveis comuns:

<script>
	let customerName = '' // Regular variable
</script>

<input type="text" bind:value={customerName} /><p>Booking for: {customerName}</p>

O campo de entrada funcionaria (você poderia digitar nele), mas a tag <p> mostrando a prévia permaneceria vazia. Ela leria customerName uma vez quando a página carregar (quando é uma string vazia) e nunca seria atualizada.

Com Estado Reativo

Agora com $state:

<script>
	let customerName = $state('') // Reactive state
</script>

<input type="text" bind:value={customerName} /><p>Booking for: {customerName}</p>

Cada tecla pressionada atualiza customerName, e o Svelte atualiza automaticamente a prévia. O usuário vê seu nome aparecer em tempo real enquanto digita. É isso que faz os aplicativos web modernos parecerem responsivos e vivos.

Construindo sobre Esta Base

Nas próximas lições, iremos:

Criar um formulário de reserva completo com múltiplas variáveis $state
Conectar inputs com binding bidirecional
Construir um painel de pré-visualização ao vivo que atualiza conforme os usuários digitam
Lidar com o envio do formulário

Por enquanto, o insight principal é: $state é o que torna as UIs dinâmicas possíveis. Cada parte interativa do BookIt — do formulário de reserva aos filtros de busca até os seletores de data — usará estado reativo.

Quando Usar `$state`

Use $state quando:

O valor mudará durante o ciclo de vida do componente
A UI deve atualizar quando o valor mudar
A entrada do usuário precisa ser rastreada

Não se preocupe com $state para:

Constantes que nunca mudam
Valores usados apenas em cálculos, não exibidos
Dados passados como props (tratados de forma diferente)

<script>
	// ✅ Reactive — changes based on user input
	let searchQuery = $state('')

	// ❌ Not needed — this never changes
	let API_URL = 'https://api.bookit.example'

	// ❌ Not needed — constant configuration
	const MAX_BOOKINGS = 10
</script>

Erros Comuns

Esquecendo o `$state`

<script>
	// ❌ Won't update the UI
	let name = ''

	// ✅ UI updates when name changes
	let name = $state('')
</script>

Se sua UI não está atualizando como esperado, verifique se você esqueceu o $state.

Usando `$state` para Tudo

<script>
	// ❌ Overkill — this never changes
	let title = $state('BookIt')

	// ✅ Simple constant
	let title = 'BookIt'
</script>

Use $state apenas para valores que realmente precisam ser reativos.

Resumo

Variáveis JavaScript comuns não disparam atualizações na UI. A rune $state do Svelte cria estado reativo que atualiza automaticamente o DOM quando os valores mudam. Esta é a base de aplicações Svelte interativas.

Principais conclusões:

Variáveis simples renderizam uma vez e não atualizam a UI
$state(initialValue) cria estado reativo
Use $state para valores que mudam e afetam a exibição

Próximos Passos

Agora que você entende a reatividade, vamos colocá-la em uso. Continue com Criar um Componente de Formulário de Reserva para começar a construir a funcionalidade principal do BookIt.