Managing Side Effects & untrack() in Svelte 5

Fine-Grained Effect Dependencies

In Svelte 5, $effect automatically tracks any reactive state read inside its body during execution.

import { useState, useEffect } from 'react';
export function Logger() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('Count updated to:', count);
    return () => console.log('Cleanup previous effect');
  }, [count]);
  return <button onClick={() => setCount(c => c + 1)}>Increment</button>;
}

<script lang="ts">
  let count = $state(0);
  $effect(() => {
    console.log('Count updated to:', count);
    return () => {
      console.log('Cleanup previous effect');
    };
  });
</script>
<button onclick={() => count++}>Increment</button>

Preventing Unwanted Dependencies with untrack()

If you need to read a reactive signal inside an $effect without re-running the effect when that specific signal changes, wrap it in untrack():

import { untrack } from 'svelte';
 
let count = $state(0);
let totalClicks = $state(0);
 
$effect(() => {
	// Re-runs whenever 'count' changes, but ignores changes to 'totalClicks'
	console.log('Count:', count);
	console.log(
		'Total clicks snapshot:',
		untrack(() => totalClicks)
	);
});