0

Is there a downside to instantiating an RxJS subject in a service compared to a component? Can the instantiation of a subject in and of itself cause any memory leaks like when we forget to unsubscribe to an observable? Does the scope of the service (root/module/component) matter in this regard?

user10103655
  • 111
  • 1
  • 11
  • 1
    That really depends on the code you write and how you use it. Forgetting to unsubscribe will always result in a memory leak of the observable doesn't complete. That subscription will always remain in memory regardless, and fire for every new event emitted for that subject. – Damian C Nov 19 '19 at 18:53
  • Right, that's assuming some client code subscribes to that subject and doesn't unsubscribe. Assuming all subscribers of that subject unsubscribes is there a downside to having that subject in a service compared to a component? – user10103655 Nov 19 '19 at 18:55
  • I think that gets into opinion territory and your preferences for designing an application which is a bit out of scope here. However having a subject inside of a service vs a component allows you to share it easier through dependency injection. Also having a subject inside of a component doesn't guarantee it will be garbage collected if you forget to unsubscribe. – Damian C Nov 19 '19 at 18:59
  • Right, so your answer is as far as memory leaks are concerned there shouldn't be an issue regardless of if the subject is instantiated in a service or a component as long as any subscriptions are unsubscribed? – user10103655 Nov 19 '19 at 19:04

2 Answers2

1

You should create services to manage logic, component classes should only marshal data between the template and the service.

The best way to manage subscriptions is with the async pipe

@Injectable()
export class DataService {
  data$ = new BehaviorSubject<DataType>(new DataType());
}

and then in your components

data$ = this.dataService.data$;

and in the template you subscribe with the async pipe

<ng-container *ngIf="data$ | async as data">
  {{ data | json }}
</ng-container>

Doing things with the async pipe means the subscriptions are managed for you and there are no memory leaks.

Adrian Brand
  • 20,384
  • 4
  • 39
  • 60
  • Thanks, this answer is a little broader than what was asked by my question. I take it then that you are in favor of instantiating subjects in services and do not see a downside to it in terms of memory leaks. – user10103655 Nov 20 '19 at 06:43
  • Subscription management is important to avoid memory leaks, async pipe helps with it and times you need to subscribe use takeUntil with a subject you emit into on ngOnDestroy. – Adrian Brand Nov 20 '19 at 06:48
  • See this https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription?rq=1 – Adrian Brand Nov 20 '19 at 06:48
  • Thanks again, I believe you are correct and that I am already aware of this. My question and follow up question has a slightly different focus than overall subscription management. – user10103655 Nov 20 '19 at 08:21
  • Does the scope matter? No, the difference between providing services in root, module and component is the uniqueness of the instance. Root is a singleton instance, module is across the module and component is between a component hierarchy. You have exactly the same subscription concern no matter how shared the instance of the service is. Unsubscribe when you are finished, the async pipe helps in this regard as it manages subscriptions for you. To what extent the observable is shared doesn't change this. – Adrian Brand Nov 20 '19 at 09:49
1

You always have to unsubscribe observables/subjects upon component onDestroy or use async pipe to do the job regardless. So it doesn't make a difference if the Subject is created in service or component.

We inject services in component for business logic handling in most cases, so component is a consumer and it is its responsibility to stop consumption when it is no longer available in DOM to prevent memory leaks.

Scope of services really depends on your business requirement i.e if service store share data, or if a new instance of service is needed. However unsubscription rule doesn't change

Fan Cheung
  • 10,745
  • 3
  • 17
  • 39
  • If you create an observable in the component it doesn't create a memory leak if you don't unsubscribe as the whole component falls into garbage collection including the observable and subscriptions. That said it is still good practice to unsubscribe. – Adrian Brand Nov 20 '19 at 23:12