Getting Started with Firebase 9 #15 - Unsubscribing from Changes

Key Takeaways

all right my friend so there's one more thing i'd like to show you when it comes to firebase nine in this series and that is how to unsubscribe from subscriptions so currently we have three subscriptions set up we have one to the collection of data which sends us back a new snapshot every time there is a change in that collection one to a single document which sends us back a new document when there's a change to it and one to the authentication status which sends us back the user every time there's a status change so it's good practice to unsubscribe from any subscription when you no longer need it so i'm going to show you how we can do that for all three of these things right here so then to begin with i've already added on a new button at the bottom with the class of unsub and that says unsubscribe from db auth changes so we're going to unsubscribe from everything in one go when we click on this button right so over in the index.js i've also grabbed this unsub button using the query selector on this class and then i've added an event listener to it which is a click event so when we click on this we're going to fire some code all right so what we want to do in here is unsubscribe from all of the three things that were subscribed to so this one right here where we subscribe to all changes but also up here we have a real-time subscription to a single document if i can find it right at the top okay so this is the real-time data for a full collection i think the document is down here somewhere let me try and find it okay there it is so we have that subscription as well so we want to unsubscribe for all three of these so what we need to do is basically just capture the return of all of these subscriptions in some kind of variable because they all return a function and that function is an unsubscribe function so where we have the real time collection subscription i'm going to say const and then you can call this what you want it really doesn't matter i'm going to call it unsub call for collection and set it equal to this so this on snapshot returns to us an unsubscribe function and i'm storing that inside this constant i'm going to do the same thing for the document subscription down here so i'll say const unsub doc this time since we want to unsubscribe from a document and again this returns to us an unsubscribe function which is stored inside this constant and the same is true for the authentication status change one as well so this also returns a function which is an unsubscribe function so i can capture that in a constant as well and i'll say unsub auth for that one and set it equal to this so all we have to do is invoke all three of those functions inside here first of all i'll say console.log unsubscribing like so and then under that we'll do unsub call and invoke that function unsub doc and invoke that function and then finally on sub auth and invoke that function so now we're unsubscribing from all of those subscriptions all in one go when we click on that button so let me save this now and give it a whirl all right then so we can see this button in the browser now but i don't want to click it just yet because first of all i want to demonstrate that the subscriptions are still going on in the background so i'll add a new document first of all over here abc in def doesn't really matter and we can see that new snapshot that's a subscription let's try auth so i'm gonna try and log in as mario at netninja.dev and then test one two three four five and then log in and we can see down here the user so that subscription is still live and if we log out we can see it fires again but this time it's normal so these subscriptions are still going on in the background right now watch what happens if i click on this button then we can see unsubscribing right and now if i add in new documents then we shouldn't get a new snapshot because we've unsubscribed and we don't the same is true for this if i try to log in again then we no longer see that function fire and the user log to the console because we've unsubscribed from all state changes as well so that's how we unsubscribe from our subscriptions and remember it's good practice to do this whenever we don't need those subscriptions anymore all right then so that's pretty much it for this series of videos about firebase nine if you want to learn more definitely check out the docs because there are other features that you can use for example storage which is a way we can upload files to firebase hosting so we can host our websites using firebase and also cloud functions as well so we can run our own custom code on the backend so yeah if you want to learn more about firebase 9 definitely check out the docs so my friends i really really hope you enjoyed this series and you learned something along the way if you did please please please don't forget to share subscribe and like that really means a lot and if you want to access all of my youtube courses without adverts also get access to premium courses and early access courses as well you can do at netninja.dev you can sign up for net ninja pro which is just nine dollars a month and also half price for the first month with this promo code right here and for that like i said you get access to every course without adverts without youtube adverts you also get access to exclusive courses not found anywhere else you get access to my premium courses on udemy and also early access to all of my youtube courses as well so the link to this page to sign up is gonna be down below again i really hope you enjoyed this series and i'm gonna see you in the very next one [Music] you