Fine-grained Dependency Isolation with $untrack

Snippet

Fine-grained Dependency Isolation with $untrack

In Svelte 5, effects automatically subscribe to any rune accessed within their scope. To prevent an effect from re-running when a specific piece of state changes—while still needing that state's value for the execution—we use the $untrack rune. This is essential for preventing unnecessary executions in performance-critical rendering paths or when coordinating state that shouldn't create a circular dependency.

snippet.js
javascript
$effect(() => {
  console.log('Triggered by:', activeUser.id);
  
  $untrack(() => {
    // Reading theme doesn't subscribe the effect to theme changes
    applyStyles(activeUser.id, theme.current);
    analytics.logEvent('user_view', { theme: theme.current });
  });
});

svelte

Breakdown

$effect(() => {

Declares a side effect that tracks reactive dependencies.

$untrack(() => {

Wraps a block of code to prevent the surrounding effect from subscribing to the runes inside.

theme.current

The value is read here, but because it is inside $untrack, changes to 'theme.current' won't re-trigger the effect.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Fine-grained Dependency Isolation with $untrack

Related