Memory Leaks in Javascripts

    A memory leak occurs when an application consumes memory that it no longer needs but fails to release. Over time, this unneeded memory builds up, reducing the available memory for the application or other processes. This can lead to performance degradation, crashes, or application instability.

In the context of Angular (or any JavaScript application), memory leaks often happen when objects or references remain in memory longer than necessary because:

1. The garbage collector cannot reclaim them.
2. They are inadvertently kept alive by event listeners, subscriptions, or references.

---

How Memory Management Works in JavaScript

JavaScript uses automatic garbage collection:

1. When an object or value is no longer reachable, it is eligible for garbage collection.
2. The garbage collector identifies and removes these unreachable objects to free up memory.

However, if objects are still referenced (even unintentionally), the garbage collector cannot reclaim them, causing a memory leak.

---

Common Causes of Memory Leaks in Angular

1. Unsubscribed Observables

When an Observable subscription isn't explicitly unsubscribed, the component retains a reference to the subscription, preventing garbage collection.

Example:

this.http.get('api/data').subscribe(data => console.log(data));

If the component is destroyed but the subscription is still active, the memory for that subscription is never released.

2. Event Listeners

Adding event listeners without removing them can cause memory leaks.

document.addEventListener('click', () => {

    console.log('Clicked!');

});

If the listener is not removed, it remains in memory even after the component or service is destroyed.

3. Global Variables

Accidentally creating global variables (e.g., forgetting let, const, or var) can lead to persistent references that aren't easily reclaimed.

Example:

myVar = 'This is global!'; // No `let`, `const`, or `var`

4. Detached DOM Nodes

If a DOM element is removed from the DOM tree but JavaScript still holds a reference to it, the memory for that element cannot be released.

Example:

const element = document.getElementById('myElement');

element.remove();

console.log(element); // Still accessible, so not garbage collected

5. Closures

Improper use of closures (functions with references to outer variables) can keep unused variables alive in memory.

Example: 

function createClosure() {
let largeObject = new Array(1000000); // Large object

return () => console.log(largeObject); // Keeps reference to `largeObject`
}

const closure = createClosure();

---

Impact of Memory Leaks

• Performance degradation: Application slows down as memory usage increases.
• Application crashes: Lack of available memory leads to crashes.
• Browser instability: Especially noticeable in Single Page Applications (SPAs) like those built with Angular.

---

How to Prevent Memory Leaks in Angular

1. Unsubscribe from Observables

Always unsubscribe from Observables when a component is destroyed.

• Manual Unsubscription:

  
  import { Subscription } from 'rxjs';
  private subscription: Subscription;
  ngOnInit() {
    this.subscription = this.myObservable.subscribe(data => console.log(data));
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

• Using takeUntil: Use the takeUntil operator with a Subject to automatically complete subscriptions:

  
  import { Subject } from 'rxjs';
  import { takeUntil } from 'rxjs/operators';
  private destroy$ = new Subject<void>();
  ngOnInit() {
    this.myObservable.pipe(
      takeUntil(this.destroy$)
    ).subscribe(data => console.log(data));
  }
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

• AsyncPipe: Use the AsyncPipe in templates to automatically handle subscriptions.

  
  <div *ngIf="data$ | async as data">
    {{ data }}
  </div>

2. Remove Event Listeners

Remove manually added event listeners during component destruction:

ngOnInit() {
document.addEventListener('click', this.handleClick);
}
ngOnDestroy() {
  document.removeEventListener('click', this.handleClick);
}
handleClick() {
console.log('Clicked!');
}

3. Use WeakMap or WeakSet

For temporary references, use WeakMap or WeakSet, as they allow garbage collection when the referenced object is no longer in use.

4. Track and Clean Up Timers

Clear any active timers (setTimeout, setInterval) in ngOnDestroy.

private timer: any;
ngOnInit() {
    this.timer = setInterval(() => console.log('Interval!'), 1000);
}
ngOnDestroy() {
    clearInterval(this.timer);

}

---

How to Detect Memory Leaks

1. Browser DevTools

• Performance Tab:
  • Record and observe memory usage over time.
  • Check for increasing memory consumption.
• Memory Tab:
  • Take heap snapshots and compare them.
  • Look for unexpected objects that persist in memory.

2. Tools

• Augury: Angular-specific debugging extension.
• RxJS Spy: Monitors Observable streams.
• Chrome DevTools Lighthouse: Provides performance audits, including memory issues.

---

Summary

Memory leaks occur when resources like subscriptions, event listeners, or references are unintentionally retained. Preventing them involves good practices such as unsubscribing, cleaning up listeners, and using proper tools to detect and resolve leaks. Following Angular's lifecycle hooks and reactive programming paradigms effectively reduces the risk of leaks.

Next : Debugging Javascript Memory Leaks