Firebase with React, v2 Firebase with React, v2

React Context & Hooks Solution

Check out a free preview of the full Firebase with React, v2 course:
The "React Context & Hooks Solution" 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 live codes the solution the exercise. A question is also asked about the architectural decision to use the Context API over using React hooks.

Get Unlimited Access Now

Transcript from the "React Context & Hooks Solution" Lesson

[00:00:00]
>> Steve Kinney: All right, so we're going to refactor the user, we're gonna create this user/provider now that is going to basically take the rest of the state management out of the application component, right? Eventually, we'll create a second obstruction, which is a traditional high order component obstruction, mostly to show that this isn't the only way that you can do it.

[00:00:24] Do I need to mix and match? I don't know, maybe, but what I really wanna show is that there are multiple ways to kind of hook into Firebase and pass it along to your components. Well, actually, we'll do users in two different ways, one now and one in a little bit.

[00:00:40] So let's start out with making that user provider.
>> Steve Kinney: And again, this is ultimately going to be a whole lot of copy paste from the application, but we're into it. So we'll use Component, we also want createContext, and we’re gonna need auth and,
>> Steve Kinney: createUseProfileDocument from that Firebase file that we have.

[00:01:25]
>> Steve Kinney: Cool, and we know that we're gonna need one of those context objects again.
>> Steve Kinney: You can give it a default value, our state is gonna handle that so we don't have to, but just to demonstrate.
>> Steve Kinney: All right, and now we make a class of UserProvider.
>> Steve Kinney: And that will have that same statement beginning.

[00:02:02] This is again exactly what we have in the application component.
>> Steve Kinney: And since we already took all of the post stuff, the only thing stopping me from copying and pasting too much for the post provider before was that all that user stuff was in there. [LAUGH] But I got all that out, so there's a lot more copy paste action here.

[00:02:25] I can take pretty much all of these.
>> Steve Kinney: And I will cut it.
>> Steve Kinney: So you can see how simple our application component is getting.
>> Steve Kinney: Let me paste all that in,
>> Steve Kinney: This will actually be this.
>> Steve Kinney: And this is going to be the, we also need those children, so we'll say,

[00:03:19]
>> Steve Kinney: That'll eventually get passed in. So this will be that UserContext.Provider and the value is gonna be in this case the user.
>> Steve Kinney: We'll parse in the children,
>> Steve Kinney: And we’ll export default,
>> Steve Kinney: UserProvider.
>> Steve Kinney: All right, so we've got that in place, the other thing we need to do is add it to that index.js, just like the other one.

[00:03:55] This can get a little ridiculous, but theoretically you can compose them all together and create one if you needed to as well.
>> Steve Kinney: We will be adding one more to the stack eventually, but all right, so we've got those three in place, and then for our authentication,
>> Steve Kinney: We'll say,

[00:04:35]
>> Steve Kinney: We need to pull in that useContext as well.
>> Steve Kinney: We don't need this one anymore.
>> Steve Kinney: This doesn't exist.
>> Steve Kinney: Neither does this.
>> Steve Kinney: He says with great fear.
>> Steve Kinney: All right, application still works. So if you think about how big our application component was getting for the purposes of hooking up to Firebase and passing it down to components, this is what it is now.

[00:05:23] And could we make it a stateless functional component? Totally, we could. We're not gonna do that right now, I'll leave that as an exercise for the reader. But,
>> Steve Kinney: And yeah, Authentication has access to the user, Post has access to the posts. We're actually gonna find another way to pass the user around as well in a little bit, as I've foreshadowed a few times with a higher order component.

[00:05:47] But we can start taking out all these Firebase state and just wrapping it around our UI, right? So anything that needs something from Firebase, we can kind of pass it in and wrap it around like this, it doesn't become like a huge part of our application. It's just like hey, we kinda just don't think about the state too much anymore, right, and these providers handle it, yeah?

[00:06:06]
>> Student: May be a side question, maybe not relevant.
>> Steve Kinney: All right, into it.
>> Student: It's about using hooks versus just using the consumer. In your experience, six of one half a dozen of the other, are there good use cases for hooks? [CROSSTALK]
>> Steve Kinney: Hooks are still in kinda the release candidates, so I'd wait and see how it shakes out.

[00:06:26] Some of this is inspired by recording and stuff along those lines. I think its a nice API. Right, I don't think it matters though.
>> Student: Okay, cool.
>> Steve Kinney: All right, a lot of code bases I work on, we're not on 16.6 or 16.7 yet, right? And so that will also inform your choices as well, right?

[00:06:49] At we use MobX as effectively a poor man's Context API, right? So we have a model. Basically, for the things we want to be completely divorced from the rest of the application, props go in, they're all internally managed with MobX and then they spit stuff back out to Redux.

[00:07:10] So there's a whole bunch of different ways to do it, this is just one option. It is not the officially blessed version, I chose it because it was native and I didn't have to pull in a third party library. And like I said, in the previous version of this course we used Redux and Redux func to send actions to Redux.

[00:07:30] And it's using the real time database, but there is no difference from if you just hooked up to doc changes and did the same thing.