🔄 Deep Dive: Using untracked() with Angular Signals

Signals are powerful for reactivity, but sometimes you want to read a signal’s value without tracking it—so that updates to that signal don’t trigger effects or recomputations. That’s where untracked() comes in.

Use untracked() to read a signal’s value without creating a dependency. This is useful for logging, analytics, or when you want to avoid unnecessary updates.

How This Example Works

• Signal Declarations: Two signals are declared: counter1 = signal(1) and counter2 = signal(1).
• Effect: An effect() => { console.log(counter1(), untracked(() => counter2())); } logs both counters to the console, but counter2 is read using untracked().
• Updating Counters: Clicking the buttons updates each counter independently.
• Reactivity: Updating counter1 triggers the effect and logs both values. Updating counter2 does not trigger the effect, because it’s read untracked.

Why Use untracked()?

• Performance: Avoid unnecessary recomputations or effects when you only need a value once.
• Fine-Grained Control: Choose exactly which signals should trigger updates and which should not.
• Debugging & Logging: Log or inspect signal values without affecting reactivity.
• Advanced Patterns: Useful in custom hooks, analytics, or when integrating with non-reactive APIs.
• Real-World Use: Use untracked() when you want to read a signal’s value without making your effect or computed depend on it.