Angular 2 / Rxjs : do I really need to unsubscribe?

Question

I understand that I must unsubscribe certains Observable (ie: Observables that have infinite value) when Components are destroyed in order to prevent memory leaks. I do not need to do that for finite Observables as they will complete and automatically unsubscribe.

But if I create an infinite Observable in my component (for example FormGroup.valueChanges, or QueryList.changes), this one will be destroyed with the component that contains it, so I think that they will be no memory leak even if I do not unsubscribe from it.

Here is a simple example:

@Component({})
export class DummyComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            firstName: [''],
            lastName: ['']
        });
        this.form.valueChanges.subscribe(
            x => console.log(x)
        );
    }
}

Here, I do not unsubscribe from this.form.valueChanges; when my component is destroyed, the this.form.valueChanges will be destroyed too.

Will there be a memory leak in this case?

Answer 1

As Babar had mention, you need to do the unsubscribe in order to stop those subscriptions to continue watching for changes.

For your particular case I think that you have a point.

One thing I do when I have a lot of subscriptions in the same component is the following.

First I create "subscriptions", an empty Array of Subscription type.

private subscriptions: Subscription[] = [];

Then every time I need to do subscribe I push it into the array

this.subscriptions.push(this.form.valueChanges.subscribe(x => console.log(x)));

And in the ngOnDestroy I unsubscribe to every subscription inside the array.

ngOnDestroy(): void {
  this.subscriptions.forEach((elem) => { elem.unsubscribe(); })
}