Complete Intro to React v4 Using the Component Anywhere

Transcript from the "Using the Component Anywhere" Lesson

[00:00:00]
>> Brian Holt: All right, now we're gonna make context work, I hope. So we have context here. Where it says this.something, we're gonna have to change that to the context.something cuz it's coming from context. All right, so context.handleLocationChange. This.state.location will be context.location. This .state.animal will be context, handleAnimalChange will be context.

[00:00:28] Context, I hope you're catching a pattern here.
>> Brian Holt: Animals, this'll stay the same cuz coming from the modules.
>> Brian Holt: Context.breed.
>> Brian Holt: I'm actually just half tempted to say select all of those, Cmd+Shift+L, and say context.
>> Brian Holt: And then anywhere that says this now I can just say Cmd+Shift+L, and say context.

[00:01:02]
>> Brian Holt: And I think that's Ctrl+Shift+L on Windows if I'm not mistaken.
>> Brian Holt: Maybe not.
>> Brian Holt: Any case, anywhere it says this.state or this.something, right, just change that to context., cuz that's all coming from context now.
>> Brian Holt: So now, as far as I can see here in my notes, this should work for search box.

[00:01:30] But now we have to go make SearchParams use search box, right?
>> Brian Holt: So go back to search box which should now be or sorry, the SearchParams, the route. Nothing's in here anymore. But it'll be really short. It's gonna be import.
>> Brian Holt: React from 'react', and import SearchBox from './SearchBox'; class SearchParams.

[00:02:03]
>> Brian Holt: Or search-route or whatever you wanna call it.
>> Brian Holt: extends React.Component.
>> Brian Holt: And we'll put a render method in here, and return.
>> Brian Holt: div className="search-route", and we'll put SearchBox with no params, just like that.
>> Brian Holt: At the bottom, we'll say export default SearchParams.
>> Brian Holt: So here's the magical part about context, kind of the payoff of everything that we've done.

[00:03:00] We have this SearchParams route that knows nothing about SearchBox, it just dumbly renders it. And yet, SearchBox is able to interact with App.js without passing any data through SearchBox. We have the self-contained SearchBox component that we can throw anywhere, right? Anywhere that's under the provider and it's going to read and write to the provider, and nothing in the middle has to know about it.

[00:03:26] And that's pretty compelling, that's pretty cool in my opinion. But what's hard about that is if I'm looking for the problem and I know the problem's in SearchParams.js, I look at this and I was like, I have no idea why this isn't working. Because I can't see any of the data.

[00:03:43] Or if I look at App.js, I know something's messing up, like breed. But because it's going into the portal of the provider, I don't really know what 's modifying it right? There's some magic going on, and you can't really see through it, you kinda have to work backwards.

[00:03:59] You have to look for everywhere that you're bringing in the consumer and seeing if that's the problem. So there's danger in using context, right? You've taken away the explicitness of it. Let's go check to make sure that I actually didn't break everything, which there's a non-trivial chance that I did that.

[00:04:18]
>> Brian Holt: So if I go to SearchParams
>> Brian Holt: Yeah, see, I broke everything, so that's fun.
>> Brian Holt: Pet finder is not defined in App.js. So I did not do this, const pf = petfinder.
>> Brian Holt: key: process.env.API_KEY, secret:
>> Brian Holt: process.env.API_SECRET.
>> Brian Holt: And this should be petfinder, all the way around, petfinder = pf.

[00:05:11]
>> Brian Holt: So all I did was this, right here, yeah. Because we're using it down here, in getBreeds().
>> Brian Holt: So now, hopefully,
>> Brian Holt: Works again, right? So now we have this self-contained search box, still works.
>> Brian Holt: So now, the really powerful thing that we can do is we can go into Results.js

[00:05:43]
>> Brian Holt: Here in results, and I can just say up here, import SearchBox from "./SearchBox". Then just drop this first thing under search here, up here, SearchBox /.
>> Brian Holt: Guess what? Because it's all self-contained, because all the props are coming in via context, this just works.
>> Brian Holt: So I just import a SearchBox at the top and added that line right there on 43.

[00:06:25]
>> Brian Holt: To me, that's compelling, right? That's a truly reusable component. I just drop that anywhere and it's doing all this management of its data behind the scenes. I don't really have to worry about that black box.
>> Brian Holt: For example, React router, the router that we're using right now, is using context all over the place, right?

[00:06:46] If you go to the DevTools, you'll see nine layers of context that it's using to manage all that stuff. That's what context is really powerful is libraries, right? Libraries that need to connect to each other through disparate amounts of application layers.
>> Brian Holt: So while you may not use context too much, I invite you to use it as little as possible.

[00:07:06] It's gonna power all of your libraries that then you would pull in like reach router.
>> Brian Holt: So now if we go to just slash, notice that we have this up here.
>> Brian Holt: And it's still working.
>> Brian Holt: Dwarf hamsters.
>> [LAUGH]