Firebase with React, v2 Firebase with React, v2

Subscribing to Database Updates

Check out a free preview of the full Firebase with React, v2 course:
The "Subscribing to Database Updates" Lesson is part of the full, Firebase with React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve utilizes the onSnapshot method to ensure that the page is listening to the database changes being made.

Get Unlimited Access Now

Transcript from the "Subscribing to Database Updates" Lesson

[00:00:00]
>> Steve Kinney: All right, so we can create, we can read and delete. We can't update just yet, and we will, but I feel like refreshing all the time is no fun. So what we'd like to do is get it so that when the database changes our UI changes, right?

[00:00:19] And that will make it a little easier so we don't have to keep re-fetching from the database every time. Before we put one in the database when we created one, then we immediately got it back out. As this application grows, I'm gonna be really honest, I don't wanna do that anymore.

[00:00:36] So what we're gonna do is say, hey, whenever the database changes, tell me about it. And we'll update the UI to reflect that, which is gonna involve a little bit of refactoring our code. And instead of get, which will get you everything one time, we're gonna do an on snapshot, which will be every time,whatever that query, whatever the scope of that query is.

[00:00:57] In this case, it's all posts. But if I limited it to ten, it would be just the first ten. Any time that data set changes, we'll get a new snapshot, and we can update the user interface. Each change counts as a database query. Right, so just something to kinda keep in mind, but like I said, we're not gonna get anywhere close to that.

[00:01:20] I think it takes, I don't wanna quote numbers, but it's pretty hefty before you actually blow past the free plan. So what we'll do is when the component mounts, we will subscribe to the changes to the post collection. And this is the application component, so it'll theoretically always be there.

[00:01:41] So we don't necessarily need to clean up after ourselves, but we're going to cuz it's polite. And if you use this in some lower level component, you could have the problem where, okay, when the components mounts, you start listening for the changes. And then the user navigates away, you never stop listening, which means that that's still firing.

[00:02:04] And it means that we have a whole bunch of JavaScript objects that can't get garbage collected, so on and so forth. It's effectively a memory leak at that point. So what we'll do is when the component mounts, we will start listening. And when the component unmounts, we will remove the listener, we'll unsubscribe from those changes.

[00:02:20] Cool, so what we'll do is we need to hold on to the function that we wanna unsubscribe from. So we'll give ourselves just this class property called unsubscribe.
>> Steve Kinney: And we'll set that to null, for now. And that's just to put it in the class scope. Now when the component mounts, I can get rid of this code here.

[00:02:50]
>> Steve Kinney: We'll say firestore.collection('posts'). This time, instead of get, we're gonna say onSnapshot. And that's not going to return a promise, it's gonna take a callback. Give me a function that you want me to call every time the data changes. So we'll take the snapshot, and we'll do something very similar from what we had before.

[00:03:16] We'll say const posts = snapshot.docs.map. We have that,
>> Steve Kinney: this.setState to posts. Now this onSnapshot returns a function that you can call to unsubscribe. So that's where we'll say, this.unsubscribe,
>> Steve Kinney: Equals this subscription.
>> Steve Kinney: So when the component will unmount, we'll call just this.unsubscribe, and that will unsubscribe our listener so that we are good to go.

[00:04:07]
>> Steve Kinney: Awesome, so this'll get us a little bit of the way there. You're gonna see, we do need to do a little bit of clean up, but it's the best kinda clean up. It's the kinda clean up where you delete code, right? Those are my favorite refactorings, I don't move anything around, I just start deleting stuff.

[00:04:21] And that's pretty much the best feeling in the world. So let's go ahead, and what we will do is I'm gonna actually,
>> Steve Kinney: I'll actually go make a new tab.
>> Steve Kinney: I don't know about the rest of you, but nothing makes me happier than seeing two windows stay in sync.

[00:04:46]
>> Steve Kinney: So we'll go ahead, and we'll make another post.
>> Steve Kinney: Whoa, it happened on both simultaneously, right, because both of them are subscribed to the database just really just to make a point.
>> Steve Kinney: Watch both of the screens. Boom, real-time updates being pushed to both of them.
>> Steve Kinney: We can also go ahead and delete one, you see delete on both of them, so on and so forth, right?

[00:05:30] As the data changes, these updates are pushed out to every connected user.