Firebase with React, v2 Firebase with React, v2

React Context & Hooks Exercise

Check out a free preview of the full Firebase with React, v2 course:
The "React Context & Hooks Exercise" 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:

Student are instructed to abstract code out of the Application component into the UserProvider component, as was done with the PostsProvider component in the last few sections.

Get Unlimited Access Now

Transcript from the "React Context & Hooks Exercise" Lesson

[00:00:00]
>> Steve Kinney: What I want you to do is, seems kind of crazy and nuts. But all we did was really take out a lot of the code from application and move it to a new file, right? The biggest and scariest part is in the render component where we, well first, we created this post context up here.

[00:00:26] The rest of this is pretty much taken from Application.jsx. The biggest difference is right here in this lines, right, where we take the children from the props. And we use this very scary PostsContext.Provider and give it the value, and the children. And in index.js, we wrap it in the PostProvider.

[00:00:51] What I would challenge you to try is get a little bit of muscle memory and try to do the same thing with the UserProvider, right? So it's gonna be the same ripping code out of application into a new file. I'm gonna push this code up. The biggest changes are this createContext up here from React.

[00:01:15] In the render method, we take the children, and we pass the children into a PostContext.Provider that has the value from the application state. So it's basically pulling a lot of the logic that live at the top of our tree and making it modular so that we can use it anywhere within our application.