RxJS, observables with dynamic page content

Question

So my entire page is basically a large form which has multiple type of buttons.

• Multiple ADD buttons which add a group of input elements to the page
• Multiple REMOVE buttons which remove a group of input elements from the page
• A SUBMIT button to submit the form
• A LOGIN button that replaces the contents of body tag with a login template

I have following script included in my head tag.

const clickEvent$ = rxjs.fromEvent(document, 'click');

const btnRemove = clickEvent$.pipe(
    pluck('target'),
    filter(node => node.classList.contains('btnRemove'))
).subscribe(
    // Remove a group of input elements from the page
);

const btnAdd = clickEvent$.pipe(
    pluck('target'),
    filter(node => node.classList.contains('btnAdd'))
).subscribe(
    // Add a group of input elements to page
);

const btnLogin = clickEvent$.pipe(
    pluck('target'),
    filter(node => node.id === 'btnLogin')
).subscribe(
    document.querySelector('#container').innerHTML = 'Dynamically retrieved content using an ajax call';
);

So my question is :-

• What happens to these subscriptions when the page contents are changed?
• Do I need to unsubscribe and resubscribe every time i switch between LOGIN and HOME page?

According to my understanding. Because clickEvent$ observable is listening to events from the entire document and not a particular button, I don't need to worry about those subscriptions causing any memory leak, or am i missing something?

Answer 1

If the code you pasted is run on each page load (for instance, when navigating between LOGIN and HOME), then you will end up with multiple instances of each subcription. This is a memory leak.

If the code you pasted is run once (for instance, in a tag in the index), then I suppose it is ok, you subscriptions should be garbage collected by the browser when switching domain.

You better unsubscribe when navigating out of that component as it does not make sense to keep the useless event listeners around when viewing some other content.

According to my understanding. Because clickEvent$ observable is listening to events from the entire document and not a particular button, I don't need to worry about those subscriptions causing any memory leak, or am i missing something?

Your understanding is wrong. You don't need to care about a subscription that is intended to 'live' as long as your app, because you can rely on the browser cleaning your scripts when navigating away of it.

Whenever you create a subscription, it is kept around until you unsubscribe (or the observable completes). Creating event listeners every time you navigate to a page and not removing them when you navigate away from this page creates a memory leak. It does not matter if you listen for click events on the document or a specific element. In fact that would be the inverse: when registering an event listener on a particular element, maybe you can expect the browser to clean it up when the element is removed from the dom (which I don't think will dispose your subscriptions).