Angular effects: combine multiple signals update into one effect vs dedicate an effect for each signal

Question

I would like to use the effect function to update attributes based on signals but I have too many of them.

I know that the effect will be triggered if a signal is changed, but I am wondering if it would be more performant to dedicate an effect for each signal would be more performant.

Can someone elaborate how it works behind the scene?

Example 1: Combine all signals updates into one effect, which means if any signal is updated it will reset all attributes

effect(() => {
  this.nativeElement.setAttribute('verticalUsed', `${ scrollbarService.verticalUsed() }`);
  this.nativeElement.setAttribute('horizontalUsed', `${ scrollbarService.horizontalUsed() }`);
  this.nativeElement.setAttribute('isVerticallyScrollable', `${ scrollbarService.isVerticallyScrollable() }`);
  this.nativeElement.setAttribute('isHorizontallyScrollable', `${ scrollbarService.isHorizontallyScrollable() }`);
});

Example 2: Dedicate an effect for each signal update

effect(() => {
  this.nativeElement.setAttribute('verticalUsed', `${ scrollbarService.verticalUsed() }`);
});
    
effect(() => {
  this.nativeElement.setAttribute('horizontalUsed', `${ scrollbarService.horizontalUsed() }`);
});
    
effect(() => {
  this.nativeElement.setAttribute('isVerticallyScrollable', `${ scrollbarService.isVerticallyScrollable() }`);
});
    
effect(() => {
  this.nativeElement.setAttribute('isHorizontallyScrollable', `${ scrollbarService.isHorizontallyScrollable() }`);
});

Assuming I have more than those 4 signals, which one of the examples is more performant and efficient?

Bisexual

please share a stackblitz also – Headward

you should bind the signals to the attributes directly in the template instead of the effect – Electrocautery

Answer 1

Firstly, it's best to bind attributes in the template, which already runs in the reactive context. This way, you won't need the effect as Angular will handle updating the bindings when changes occur.

Next, let's consider whether to use one effect triggered multiple times or separate effects.

A single effect creates only one node in the Dependency Graph, which is more memory-efficient. However, it sets multiple attributes and reads from multiple signals with every signal change. Note that retrieving a signal value is almost costless because the value is already computed and getting it is a simple read operation.

On the other hand, creating multiple effects results in more nodes in the Dependency Graphs, but each one only runs when its dedicated signal changes.

In an example with 4 signals read inside an effect, it's tough to determine if there will be any performance difference - probably not. If you're considering many signal reads, it might be a trade-off between memory usage and the time it takes to run such a large function (effect).

Geehan