Read an Angular Signal Value While Being Untracked
The untracked function in Angular allows you to read a signal's value without causing the effect or computed signal to re-evaluate when that signal changes.
Effects will only re-evaluate when tracked dependencies change.
untracked always accepts a callback function that returns the value of the underlying signal. Outside untracked, reading the signal is reactive, but inside untracked, the same read becomes non-reactive.
[00:00] Use the untracked function, which needs to be imported from Angular core to make a signal read non reactive. Use the untracked function and pass a callback which reads a signal. In this case, whenever a signal value changes, it is being untracked and the [00:20] effect will not get rerun. So after saving the file and the component gets displayed, we can see that initial, the effect is being executed. But when we change the value of the signal, as we can see, no items are displayed. The effect hasn't been run again. So this [00:39] effect is not very useful if it has only one dependency which is being untracked. So let's remove it from the item service and let's put it somewhere in the app component. So we are going to use multiple signals within the effect. 1 of them is going to be tracked [00:59] and the other is going to be untracked. So let's make this effect depend on the changes to the item signal, and let's make it ignore the changes to the name filter signal. So let's read the current value of this dot item service dot item. So we're reading the most recent value of the [01:19] items array. And let's make it ignore the changes to the name filter. What is important? When we save the file and the component got displayed initially, we can see that the effect has been executed anyway initially, and the initial value of the items array is [01:39] displayed. And the initial value of the name filter, the empty string, is also displayed. So whenever we add a new item here, then the value of the item signal which is being tracked, which is reactive, will cause the effect to re execute. [01:59] However, if we change the value of the name filter, like here we have filtered the values only to Bob, we can see that the effect hasn't been executed. The untracked function can be used both in effects and computed signals. That's because an effect gets triggered [02:19] whenever any of its dependencies, that is signals, change their values. And that's the same case with computeds. So a computed will reevaluate whenever any of its dependencies change its value. Bear in mind that untracked always accepts a function that will return the value [02:39] of the underlying signal. So normally, we read the value which is reactive and within untracked the same read to the signal becomes non reactive.