$effect: efeitos colaterais
Execute efeitos colaterais novamente sempre que suas dependências reativas mudarem.
$effect: efeitos colaterais é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 4 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.
Runa de efeito colateral
Use $effect(() => { ... }) para efeitos colaterais que respondem a alterações reativas.
$effect(() => {
console.log("count is", count);
});Rastreamento automático
O Svelte rastreia automaticamente as dependências dentro do retorno de chamada.
Função de limpeza
Retorne uma função para fazer a limpeza antes da próxima execução ou durante a destruição.
$effect(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
});Executa após a montagem
O efeito é executado depois que o componente é montado e a cada alteração de dependência.
Sem SSR
As funções de retorno de chamada de $effect não são executadas durante o SSR. Use-as para lógica exclusiva do navegador.
Efeitos anteriores à montagem
$effect.pre é executado antes das atualizações do DOM; é útil para padrões de medir e aplicar.
Efeitos raiz
$effect.root cria um efeito fora do ciclo de vida do componente para casos avançados.
Comparação com onMount
onMount é executado uma vez; $effect é executado novamente quando as dependências mudam. Muitas vezes, $effect substitui tanto onMount quanto os padrões reativos.
Evitar definir estado
Modificar o estado reativo dentro de um efeito pode causar loops. Prefira $derived para valores calculados.
Leituras não rastreadas
Use untrack() dentro de um efeito para ler um valor sem registrar uma dependência.
Casos de uso reais
Registro, sincronização com localStorage, integração com bibliotecas de terceiros e ajustes manuais no DOM.
Verificação rápida
Como limpar um efeito?
Recapitulação
$effect gerencia efeitos colaterais, rastreia dependências e oferece limpeza por meio de funções retornadas.
Perguntas Frequentes
A aula “$effect: efeitos colaterais” é grátis?
Sim — o texto completo de “$effect: efeitos colaterais” é 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 “$effect: efeitos colaterais”?
Execute efeitos colaterais novamente sempre que suas dependências reativas mudarem. 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 4 de 4.
Quanto tempo leva a aula “$effect: efeitos colaterais”?
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