effect in Svelte

From the Svelte cheat sheet · Runes (Svelte 5) · verified Jul 2026

$effect

Side effects and lifecycle

javascript
<script>
  import { untrack } from 'svelte';
  
  let count = $state(0);
  
  // Simple effect
  $effect(() => {
    console.log('Count:', count);
  });
  
  // Effect with cleanup
  $effect(() => {
    const timer = setInterval(() => {
      console.log('Tick');
    }, 1000);
    
    return () => clearInterval(timer);
  });
</script>
🔄 Replaces onMount, afterUpdate, and onDestroy
🧹 Return cleanup function for teardown logic
📍 $effect.pre runs before DOM updates
🎯 untrack() prevents dependency tracking

More Svelte tasks

Back to the full Svelte cheat sheet