Firebase with React, v2 Firebase with React, v2

Subscribing to User Profile Changes

Check out a free preview of the full Firebase with React, v2 course:
The "Subscribing to User Profile Changes" 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 adds functionality to the application that updates the user's screen name as soon as the submit button is clicked.

Get Unlimited Access Now

Transcript from the "Subscribing to User Profile Changes" Lesson

>> Steve Kinney: Why does nothing change?
>> Speaker 1: No re-render, right?
>> Steve Kinney: I never hooked up, I never subscribed to those. I never subscribed to the user changing, right? So it is totally legitimate that it doesn't change. I can now change the display name but I won't see it instantaneously. Let's fix that.

[00:00:21] We can go into that UserProvider. This is gonna get a little squirely now it means that when we log in, if there is a user. Well I totally want to go subscribe to that user profile and update this provider state and when they log out, I don’t want to do that anymore, right?

[00:00:40] So we're gonna subscribe to our state change and when that changes we're gonna then also subscribe to a document, all right?
>> Steve Kinney: So here we can say,
>> Steve Kinney: Say if a user came in
>> Steve Kinney: We're gonna update that last one anyway.
>> Steve Kinney: We'll go ahead and we'll call this, this is called userAuth.

[00:01:23] So if there is a userAuth.
>> Steve Kinney: Then we'll go ahead and we'll get that current user.
>> Steve Kinney: What I might consider doing is instead of turning the whole document, this point, I'm just gonna turn the reference out of here. That feels like a better choice than I possibly could have considered earlier.

[00:01:50] So then to firebase and I'm simply going to return the reference.
>> Steve Kinney: So this is just gonna be the place in the database
>> Steve Kinney: Where this happens. All right, so what we'll do here.
>> Steve Kinney: This could happen either way, we probably didn't need to make that change but it's fine.

[00:02:31] So we'll get the userRef in this case, and we'll say userRef,
>> Steve Kinney: OnSnapshot. So every time it changes,
>> Steve Kinney: We'll go ahead and,
>> Steve Kinney: We'll say that the user,
>> Steve Kinney: or your id in this case, yeah.
>> Steve Kinney: Get everything out of there
>> Steve Kinney: All right, let's start with that and see how it goes for us.

>> Steve Kinney: Now whenever anything changes in here,
>> Steve Kinney: You can see it's automatically changing in the UI. Yeah, so let's really explain what just happened there which is when the Auth changes. If there is a user cool, what we're gonna do is we're gonna go subscribe to that user to users profile document, right?

[00:04:01] When we update this form, it's changing that document, right? So before, we were making all these changes to the user. We had to refresh to see them. Now we don't have to do that anymore. Now when the user logs in, we find, okay, I know your UID. If you don't have a document I'm going to create you one.

[00:04:16] If you do have a document, I'm going to subscribe to it. And if you don't I'm gonna make one then subscribe to it. And now any changes that happen to this user are automatically reflected in my UI. Bonus is writing that code was not the most fun I've had all day, today, right.

[00:04:30] I didn't enjoy that too much. But because I have this abstraction now of this user context I don't have to write that again. Anyone who needs a user I can basically say, here have the user. I've done all the hard work. And it's a little bit of extra steps of listen for the Auth change.

[00:04:49] When the Auth changes, go find the document, with the document go listen the changes. But that's not abstract it away. And I've created myself something really useful that and the rest of my application I can simply use that context and I don't have to really worry about it again.

[00:05:04] We'll create one other component that manages user state but good news, it's just gonna leverage this one, right? So that will also be really useful that sometimes you have to write slightly squirely code. But when you have to write really squirrelly code, if you can hide it in a box somewhere [LAUGH], and never look at it again, that's usually for the better, right?

[00:05:27] And should that squirrelly code inevitably have bugs well, you just fix it in that one place, right? Versus, I think what I used to do is which is spread my squirrely code throughout the code base. It's called job security, worked out really great. Worked out so great they had to promote me.

[00:05:46] That's fine.