$state: reatividade granular
Declare um estado reativo com a rune $state para atualizações granulares do DOM.
$state: reatividade granular é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Declarar estado
Use $state(initial) para declarar uma variável reativa.
let count = $state(0);Reatribuir normalmente
Atualize com uma atribuição normal. O Svelte renderiza novamente a interface dependente.
count = count + 1;Objetos e matrizes
$state com objetos e matrizes cria proxies profundos; as mutações são reativas.
let user = $state({ name: "Ada" });
user.name = "Bea"; // triggers updateChega de items = items
Você não precisa mais reatribuir para acionar atualizações — os proxies detectam as mutações.
Atualizações granulares
Apenas as partes do DOM que usam a propriedade alterada são renderizadas novamente.
Retornos de função
Você pode retornar objetos baseados em $state a partir de funções para criar partes de estado reutilizáveis.
function counter() {
let n = $state(0);
return {
get value() { return n; },
increment() { n++; }
};
}Usar em bibliotecas
$state também funciona em arquivos .ts/.js se eles usarem a extensão .svelte.ts.
Não rastreado
Use untrack() para ler um valor de estado sem registrar uma dependência.
Estado bruto
Para dados enormes não reativos, use $state.raw para ignorar o proxy.
Instantâneo congelado
Use $state.snapshot(obj) para obter uma cópia simples sem proxy.
Comparação com let
$state é o substituto moderno para um let simples com reatividade implícita.
Verificação rápida
O que acontece quando você modifica um objeto $state?
Recapitulação
$state cria variáveis reativas refinadas, incluindo objetos e matrizes com proxies profundos.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “$state: reatividade granular” é grátis?
Sim — o texto completo de “$state: reatividade granular” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “$state: reatividade granular”?
Declare um estado reativo com a rune $state para atualizações granulares do DOM. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “$state: reatividade granular”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Por que usar Runes: além da magia do compilador
- $state: reatividade granular
- $derived: valores computados declarativos
- $effect: efeitos colaterais