This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Intro to Context" Lesson
[00:00:00]
>> Brian Holt: Now, historically, I haven't taught Context. If you look back at the previous three versions of this course, we didn't talk about Context at all. In fact, I think in one of them I actually go on a reason on why you should not use React's Context. But with React 16, which is what we're using right now, they totally changed, in fact, it's 16.3, they totally changed how Context works.
[00:00:23] And whereas before, it was considered an unstable API, it wasn't planned to stick around forever. In the docs, it had a big warning, it was like, do not use this, pretty much? They've now revamped it, and I would say, now, it's really good. It's something that you should consider using.
[00:00:40] So let's talk about why you'd wanna use Context versus something like State. So Context is universal data for your application. If I'm using Context, if I set something on the Context, I can access it anywhere. Inside of that React tree, right? So if I have this like, let's say, we're in, let's see, how about results?
[00:01:07] Yeah, if I'm in results JS, if I set the Context here in results JS, I can access it anywhere underneath results, right? So, for example, you can see that this render is like a pet component here right, so I would be able to access it inside of pet.
[00:01:24] Now, this is both really cool and also something that's easily abused. So I want you to be very cautious and very reticent perhaps to use Context and only use it when you really, really, really have to. So on one hand, sometimes it's good to have a universal, centralized store of data, which is what Context is gonna give to you.
[00:01:46]
>> Brian Holt: But you're also kind of robbing yourself of one of the really big benefits of React, which is it's very explicit with its data management, right? It's really easy to see that this component has this data and it passes it into here, and it passes it into here, and it passes it into here, right?
[00:02:01] It's very easy to follow that flow of data, even if it's a little verbose. With Context, you can set Context up here, none of these components in the middle know anything about it and access it at another component way down the line. So this is kind of, again, a double edged sword here.
[00:02:17] You get some conveniences, but at the cost of being a little bit more magical, which is kinda something that you should be worried about.
>> Brian Holt: So this is something that they call like the data tunnelling problem, right? That if I have data up here, and I need to access it down here, every component in the middle has to pass it from its props into the children, right?
[00:02:37] And every component in the middle has to know about these props, and it's not doing anything with, right. The data tunnelling, or I've heard it called props drilling as well. And that's what Context solves for you, is it kinda says, okay, I'm gonna set Context up here, all these components in the middle don't have to know anything about it, and the one down at the bottom can access it.
[00:02:57] So makes sense? Cool. So that's what Context is gonna buy for us. It kinda fills the same need as Redux, if we're being honest. This is what Redux provides for you as well. We'll talk about Redux here later. But Context, in my mind, in my book, largely replaces Redux, and in times that I would use Redux, I would generally use Context now.