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.

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)
	);
});