And once we have looked at prop drilling, let's see how Context API as well as use context, will help
us to resolve that issue.
And first, I would want to start by pointing to a different folder and a file cabinet.
We're looking for tutorial that I'm looking for use context as well as the set and then context.
A piece I once we render, we should see the proper drilling and essentially everything that we worked
on in the previous video.
And that is by design, because this is going to be the use case where we'll have to add a little bit
of code as well as refactor our old one in order to see how Context API as well as used context works.
Now, what you'll notice here is the same exact file, and I would want to start by adding a few things
I would say use context.
So that is the hook that we'll use eventually.
And also, you know what?
I don't like the same name, so I will remove it and I'll say context API.
It's not a big deal, but just makes a little bit of sense if we do that and that once we have the setup,
then let's say so.
We have this a remote person.
And again, the whole deal was that we were passing this ermold person through the list and through
many other components.
Of course, if we would have more components down to that one component that is looking for that particular
function.
So how we can fix it?
Well, first, we would need to create the context.
So I'm going to go above the context API and I need to come up with a name.
So in this case, I'll say person and then context.
Now that is equal to every act.
And then we say DOT.
And now we're looking for the function of create context.
Now we can pass in some default one, but in my case, I won't do it.
Now, the moment we do that now, we have access to two components, the provider and the consumer.
So let's say here two components and one is going to be a provider and then the second one is the consumer.
So with the arrival of use context, we won't use the consumer.
Previously, before the hook was introduced, we were using the consumer.
However, now we don't have to.
I'm just telling you that you will get essentially two components back once you set up that create context
and the way you access those components, you're going to go with personal context and then data and
then provider or the consumer.
So the thing is, provider works as a distributor.
So what do you want to do?
Is, for example, this is your old component, correct?
This is where the rest of the components are rendered because you have less in line with unless you
have a single person.
So you'd need to find that a root component and then return of that root component.
You would want to wrap in person context and then the provider.
Let me show you why it's not important.
So instead of section, I'm going to go here with a person context and then like I said, I'm looking
for a provider.
Not why is that important?
Because we're a provider.
We have the value prop.
And what's really cool is that we can pass whatever we want.
So we'll start very simply by passing in the hello.
And what's even more cool, I can also use use contacts to access this value, whatever it is.
And the shock is that if I go to a single person, I can simply say Consed and then I know that there's
going to be some kind of value.
So I'll call this data right now.
We'll refactor it a little bit later.
But phrenologists say that it is data and now let's use our use context look and inside the use context.
OK, we need to pass this context that we created, so please don't mix the two.
We have a person, that context provider that needs to wrap your whole componentry or later in different
projects.
It will wrap our whole application.
OK, that is important.
Please keep that in mind.
But when we talk about personal context, we need to pass in that context into the used context.
So don't mix and match.
Don't say personal context.
That provider here.
Now here we're looking for a personal context, but we would want to wrap our componentry or our whole
application in the person context, that provider.
Now, of course, I keep on all the time mentioned in person context, whatever name you have over here
for the context.
My case, that is person context.
If you would have been honest context, then you would go bananas, context, dot provider.
And what's really cool that if you log data, you'll notice something really, really interesting.
Check it out in a console.
I have.
Hello.
And isn't that awesome?
Because what that means is that I have here person context provider all the way down in my componentry
and I can pass whatever values, regardless of how many levels deep and I'll have access without this
prob drilling.
So without passing it through the list.
Now you're probably saying, OK, you're just passing a simple hello.
I mean, it's not a big deal.
Yeah, but remember, we are using Trask's.
Correct.
So why don't we pass in the object again?
We have first Gahler basis, which just means that we're going back to George Plant.
And in here I'm just saying object again.
This is not some secret Ejaz X syntax where we have double Curley's.
It just simply means, yeah, I'm going back to JavaScript and in here I would want to have an object.
Now, what do I really want in that object?
Well, I would want remove person.
Correct.
So here's what I can do and say remove person.
And now of course I need to scroll down and I know that this is going to be an object so I can write
a way to structure it and I can say remove person.
And now you'll notice that our functionality still works.
Now, of course, is going to be a big, fat, massive complaint because the name is exactly the same.
So now what I would want is to return or to remove all these instances.
I don't need it over here and I also don't need it over here.
Correct.
And lastly, I don't need it where I'm setting up my list so I can remove all of them, not which data
is the same like I have as far as the import.
So now let me remove it.
And there is now my functionality still works, but I was able to go around that list.
So if I would have two, three more components that are inside the single person, I would be still
able to do it.
So we set this up in a root and then whatever is set up inside here, all of those components will have
access to whatever we pass it down into the value on this case, of course, it was just one person.
But keep in mind that since you're setting up the object, you can do pretty much anything.
And similarly, you can argue, well, we can also maybe omit the people.
And you're right, because I can pass here the value of people.
So the state value and then I can access it were well in my list.
Right.
So now I don't need to pass it through the component.
As a prop, I can simply say that I want to access it using the EU's context.
Now, in order to speed this up, I'm just going to copy and paste and I notice we have the removed
person.
Now, in this case, I will showcase that it is an object.
So let me call this main data, something like that.
And if you cancel a log, you'll see that, of course, main data will be my object.
Now, it's going to complain that people is not defined because, of course, now you need to access
that main data and then.
That people now, of course, everything.
Now, the reason why I set up a separate variable, because I want you to understand that in this case,
we right away the structure, the removed person from the object that we're getting back in this case.
I'm just showcasing that because we're accessing the object and you don't have to the structure.
You want to do it this way, you can do it this way.
Whatever is the name of the object, whatever you're getting back on, whichever property or method
you want to choose.
So in my case, since I'm looking for people.
All right.
That I just passed them, that's why I go with Maintainer and then dot people and that I'm iterating
over now.
A few things that I would want to mention.
I personally don't find it that useful if I have only one level meeting with the list, I see no problem
of passing that people state value as a prop where I would introduce the context, that is definitely
if I have two or three or whatever levels, then it definitely makes sense.
And also a lot of times I stick to setting up it one time globally and don't worry, we'll cover that
in the projects were essentially we cover our whole application in that context provider.
All right.
On the way we do that, we need to export the person, context, the provider, as well as the main
context, and we would need to wrap it in the index.
Again, that is something that we'll take a look at in the projects.
I didn't see the point of jamming everything here in editorial.
But just keep in mind two things that I have no problem of passing this one level as a prop.
Now, some people right away introduce the context again, that is their preference.
It's just a lot of times I see students where once they learn about the context, they say, well,
why we're still doing the prop drilling.
Now, in my opinion, the prop drilling starts when we start passing in two or three levels deep and
essentially we start passing through the components that don't need that info.
When we look at the people that we just passed into the list and that list was using it again, I have
no big issue over there right now.
Last thing, I guess what I would want to do is change this title from the context API and then forward
slash use context.
So hopefully it is clear how we can avoid passing unnecessary data through the components.
And now we can move on to our next topic.