DEV Community: Artak Mkr

How Signals Improve Your App Performance

Artak Mkr — Thu, 19 Sep 2024 18:10:16 +0000

Hi, In this article, I will demonstrate how signals can significantly improve the performance of your application and explain why you should consider using them.

You might already be familiar with how signals utilize ChangeDetection in Angular. Today, however, we will focus on RxJS, specifically one of my favorite operators: combineLatest. The concepts discussed here are also applicable to other operators.

I'm sure your Angular app has a lot of lines of code similar to this example

public combinedStream$ = combineLatest([first, second, third]).pipe(
    ...
);

We know that combineLatest triggers for the first time when all items—in this case, first, second, and third—have emitted their initial values. After that, it triggers every time any of the items in the array emit a new value.

Let's imagine that first, second, and third are asynchronous operations that emit new values at roughly the same time, causing the DOM to update (instead of DOM update I just console.log counter value).

What do you think will be in the console?

@Component({
  selector: 'my-component',
  standalone: true,
  imports: [CommonModule],
  template: ``,
})
export class MyComponent {
  public first = interval(1000).pipe(take(3));
  public second = interval(1000).pipe(take(3));
  public third = interval(1000).pipe(take(3));

  public counter = 0;

  public combinedStream$ = combineLatest([this.first, this.second, this.third]).pipe(
    take(10),
    map(() => ++this.counter),
  );

  ngOnInit() {
    this.combinedStream$.subscribe(console.log)
  }
}

Output:

Why 7 and not 9 (take(3) x 3 streams = 9) because combineLatest triggers for the first time when all items—in this case, first, second, and third—have emitted their initial values.

Here is the problem all streams emitting the same time interval(1000)

// 1 second 
1
// 2 second
2
3
4
// 3 second
5
6
7

Can we skip the 2, 3, 5, and 6 executions to improve our performance? Yes we can, but it's just a trick with debounceTime(0) and I a lot of Angular developers don't even think about such performance loss

@Component({
  selector: 'my-component',
  standalone: true,
  imports: [CommonModule],
  template: ``,
})
export class MyComponent {
  public first = interval(1000).pipe(take(3));
  public second = interval(1000).pipe(take(3));
  public third = interval(1000).pipe(take(3));

  public counter = 0;

  public combinedStream$ = combineLatest([this.first, this.second, this.third]).pipe(
    take(10),
    debounceTime(0),
    map(() => ++this.counter),
  );

  ngOnInit() {
    this.combinedStream$.subscribe(console.log)
  }
}

Output:

1
2
3

More than 2x performance right?

I have good news for you: Signal does this under the hood

@Component({
  selector: 'my-component',
  standalone: true,
  imports: [CommonModule],
  template: ``,
})
export class MyComponent {
  first = signal(0);
  second = signal(0);
  third = signal(0);

  counter = 0;

  computedSignal = computed(() => {
    this.counter++;
    console.log(this.counter);
    return `${this.first()} ${this.second()} ${this.third()}`;
  });

  ngOnInit() {
    interval(1000).pipe(take(3)).subscribe((value) => {
      this.first.set(value);
      this.second.set(value);
      this.third.set(value);
    })
  }
}

Output:

1
2
3

I hope you found this helpful or at least interesting. Feel free to experiment with the example to gain a better understanding

Difference between mergeMap vs switchMap vs concatMap vs exhaustMap

Artak Mkr — Sun, 01 Sep 2024 16:35:23 +0000

Hi, in your interview as an Angular developer, you might be asked several questions about RxJs operators and their differences.

One of the most common questions is "What is the difference between mergeMap vs switchMap vs concatMap vs exhaustMap?"

Let's get into it and explain them in simple terms.

I will explain the difference in behavior using one simple example:



import { interval, take, tap, from } from 'rxjs';
import {
  switchMap,
  mergeMap,
  concatMap,
  exhaustMap,
} from 'rxjs/operators';

const mapOperators = [
  mergeMap,
  switchMap,
  concatMap,
  exhaustMap
];

const selectedMap = mapOperators[0]; // <- Change operator index here

const clicks$ = from(['First Click', 'Second Click', 'Third Click']).pipe(
  tap(console.log),
);

clicks$
  .pipe(
    selectedMap((click: number) =>
      interval(500).pipe(
        tap((intervalValue: number) =>
          console.log(
            `${click} Value: ${intervalValue}`
          )
        ),
        take(3)
      )
    )
  )
  .subscribe();

In the code example, which you can experiment with on Stackblitz, you can see the imitation of 3 user clicks

Now, let's see what each of the operators will return

MergeMap



First Click
Second Click
Third Click
First Click Value: 0
Second Click Value: 0
Third Click Value: 0
First Click Value: 1
Second Click Value: 1
Third Click Value: 1
First Click Value: 2
Second Click Value: 2
Third Click Value: 2

The mergeMap operator runs the emissions in parallel which is why you see



First Click Value: 0
Second Click Value: 0
Third Click Value: 0

with value 0

SwitchMap



First Click
Second Click
Third Click
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

The switchMap operator will cancel the previous one after each new click, in our case First Click will be canceled by Second Click and Second Click will be canceled by Third Click and as the result we will see Third Click Values



Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

ConcatMap



First Click
Second Click
Third Click
First Click Value: 0
First Click Value: 1
First Click Value: 2
Second Click Value: 0
Second Click Value: 1
Second Click Value: 2
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

The concatMap operator will memorize all clicks and console.log them in the same order, in our case First Click, Second Click, Third Click as you see in the console



First Click Value: 0
First Click Value: 1
First Click Value: 2
Second Click Value: 0
Second Click Value: 1
Second Click Value: 2
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

ExhaustMap



First Click
Second Click
Third Click
First Click Value: 0
First Click Value: 1
First Click Value: 2

The exhaustMap operator will block the stream until First Click is complete and in our case Second Click and Third Click will be ignored



First Click Value: 0
First Click Value: 1
First Click Value: 2

Now that you understand the differences between these operators, you can imagine the consequences of choosing the wrong one