Circular Dependency Mitigation with untrack

Snippet

Circular Dependency Mitigation with untrack

In Svelte 5, effects automatically subscribe to all reactive state read during execution. When you need to read a value without creating a subscription—often to prevent infinite loops or unnecessary re-runs—the untrack function isolates the execution context.

snippet.js

javascript

let count = $state(0);
let status = $state('normal');
 
$effect(() => {
  if (count > 10) {
    const currentStatus = untrack(() => status);
    if (currentStatus !== 'alert') status = 'alert';
  }
});

svelte

Breakdown

untrack(() => status)

Reads the status value without adding it to the effect's dependency list.

status = 'alert'

Updates state conditionally based on the untracked value to avoid circular updates.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Circular Dependency Mitigation with untrack

Related