Fine-Grained Effect Optimization with Untracked

Snippet

Fine-Grained Effect Optimization with Untracked

In Angular Signals, an effect automatically tracks any signal read during its execution. Using `untracked` allows you to read a signal's value without adding it to the effect's dependency list. This is essential for preventing unnecessary re-runs or infinite loops when you need a value for logic but don't want to react to its changes.

snippet.js

javascript

import { signal, effect, untracked } from '@angular/core';
 
const count = signal(0);
const logFlag = signal(false);
 
effect(() => {
  console.log(`Count is: ${count()}`);
  // Accessing logFlag without creating a dependency
  const shouldExtraLog = untracked(() => logFlag());
  if (shouldExtraLog) {
    console.info('Extra logging enabled');
  }
});

angular

Breakdown

const shouldExtraLog = untracked(() => logFlag());

Reads the value of logFlag() but ensures the effect won't re-trigger when logFlag changes.

effect(() => { ... });

Registers a reactive side-effect that tracks dependencies automatically.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Fine-Grained Effect Optimization with Untracked

Related