What is Memory leakage and how to prevent it in Angular

Introduction

Hello readers. Today we are going to learn a very important concept in Angular which is Memory leakage. So, let’s get started

What is Memory Leakage?

A memory leak is a resource leak caused by improper management of memory. In other words, some part of your memory is still in use by a resource that is not required anymore. This is one of the worst issues a developer can face because it becomes very difficult to debug it. If memory is not managed properly, it can result in poor performance of the application.

You might send your code to production because these issues are not detected even by functional testing. And slowly this will lead to bad performance of your application or may also crash your application.

Talking about Angular, these issues are mostly caused due improper usage of Observables.

Let us see how.

constructor(private productService: ProductService) { }

ngOnInit() {
  this.productService.getAllProducts().subscribe((data) => {
    this.products = data;
 })
}

Now the issue here is when we are subscribing to the getAllProducts function, we are not unsubscribing to it. That means even if you navigate from this component and now this component is not being used, then in that case it will still be subscribed and will consume memory.

Preventing Memory Leakage

In order to avoid it, follow these:

Unsubscribe

constructor(private productService: ProductService) { }

ngOnInit() {

  this.subscription$ = this.productService.getAllProducts().subscribe((data) => {

    this.products = data;

 })

}

ngOnDestroy(){

this.subscription$.unsubscribe();

}

Now in this case, when you have navigated from this component, then the ngOnDestroy hook will be called and it will unsubscribe and will release the memory for it.

Async Pipe

Async pipe subscribes to an observable and always returns the latest value emitted. The best part is when the component is destroyed, it handles the unsubscription automatically. We don’t need to do it in the ngOnDestroy.

Here is a simple usage of it:

products$: Observable<Product[]>;

constructor(private productService: ProductService) { }

ngOnInit() {

  this.products$ = this.productService.getAllProducts();

}

In the HTML, it will be like

<div *ngFor="let product of products$ | async">

<p>{{product.name}}</p>

</div>

Conclusion

We must always take care of these points while working with Observables in Angular because these small mistakes may lead to bad performance of your application. And bad performance is not a good user experience. We covered two ways of preventing memory leaks in Angular which are unsubscribing and async pipes. Thanks for sticking to the end.

For more updates on such topics, please follow our LinkedIn page- FrontEnd Studio.