This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Context Q&A" Lesson
[00:00:00]
>> off screen male: Is there a particular reason why you're calling that context instead of state? Is it just-
>> Brian Holt: Because it is context, that's what it is. It happens to be the state of app but it doesn't have to be. And searchParams itself could have state as well. It doesn't in this case.
[00:00:18] So this .state would typically refer to the state of the actual component, not the context. I would always call this context.
>> off screen male: Is there any, you said that searchParams could have state, if it did have state and you're injecting context, is there any conflict? I don't know, it seems almost like cuz they're both handling-
[00:00:42]
>> Brian Holt: Yeah.
>> off screen male: State type of thing.
>> Brian Holt: So it is an arrow function, so you can refer to both of them, right? This is not, we don't have to use this in here, this will still refer to searchParams and searchParams might have, is this check box checks? Is this other, what's the active thing showing at the moment, so it'll have like more view state kind of things.
[00:01:02] And context will provide two more app state things, right? In our case, the app state is what breeds are we searching for, what animals are we searching for? Not necessarily what thumbnail are we showing, what is the active hero image, right, that's more view state.
>> off screen male: So its more of an architectural thing where you, if you're messing it up is probably the way you structured it.
[00:01:24]
>> Brian Holt: Yeah, it's a choice for sure. They don't tie your hands behind your back and say you can't put this thing in context. You can put whatever you want in context. It's just a bad idea. Does that answer your question?
>> off screen male: Yep.
>> Brian Holt: Cool, other questions? These are great questions.
[00:01:43]
>> off screen male: How do you switch contexts?
>> Brian Holt: How do you switch contexts, as in if you have multiple consumers in one place? I'm assuming that's the question, which it's a good question. I'll answer that one. If it's not, then the person can clarify and we'll answer that one too.
[00:02:00] So assume I had UserContext, right? We're making this up, we're not gonna code it, but assume there is UserContext here. First thing I would do is I would say Consumer as SearchContext, is as, and then here as UserContext. Change this to SearchContext.
>> Brian Holt: And SearchContext, and then this would probably, I would need to change it to SearchContext or something like that.
[00:02:39] Sorry, I said this consumer, I actually want to call this consumer.
>> Brian Holt: So let's do this.
>> Brian Holt: Same thing here, UserConsumer, right? And then outside of that, you would just have UserConsumer. And it doesn't matter which one's on the outside as long as they're both wrapping it, right?
[00:03:13]
>> Brian Holt: And then you would have UserContext,
>> Brian Holt: And so on and so forth. You kinda get the point here. So you just kinda keep wrapping them and then you can refer to them as different things.
>> off screen male: So wrapping's just putting it into scope, right?
>> Brian Holt: Yep, exactly.
>> Brian Holt: Hopefully, I answered that person's question.
[00:03:41]
>> off screen male: I guess, in the situation, he was talking about if you had a UserContext that had, one was an admin, one was a regular user being able to display.
>> Brian Holt: Sure, you would just handle that like normal state, right? That's no different than how you would handle any other piece of data.
[00:04:00] What I like about context is that it's just state. Still at the end of it the day, it's just react state. In fact, it doesn't even have to be state. Imagine you were doing a theme, right? So I would say import Consumer or as ThemeConsumer.
>> Brian Holt: And I would wrap it around.
[00:04:26] And your theme is not changing, right? You make one theme and you use it throughout your entire web page. So instead of having, here in app.js, instead of saying this .state I could just say, assuming this was the one for the theme, right? We could just say it's the dark theme, right, and just pass in static data, and just read that through it.
[00:04:49] It doesn't have to be dynamic, right? It might be dynamic, but if you look at the React docs, their example is theme, right? And you would just say, okay, when this is dark everywhere and so everyone would read from that dark thing and then everything would be dark, right?
[00:05:03] So this is just props and state, right? It's just props and state but we're just kind of using a portal to move it around. It's all context