Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,150 --> 00:00:09,270
And once we have looked at prop drilling, let's see how Context API as well as use context, will help
2
00:00:09,270 --> 00:00:12,100
us to resolve that issue.
3
00:00:12,480 --> 00:00:18,820
And first, I would want to start by pointing to a different folder and a file cabinet.
4
00:00:18,840 --> 00:00:24,720
We're looking for tutorial that I'm looking for use context as well as the set and then context.
5
00:00:24,960 --> 00:00:33,180
A piece I once we render, we should see the proper drilling and essentially everything that we worked
6
00:00:33,180 --> 00:00:34,770
on in the previous video.
7
00:00:34,860 --> 00:00:40,500
And that is by design, because this is going to be the use case where we'll have to add a little bit
8
00:00:40,500 --> 00:00:49,200
of code as well as refactor our old one in order to see how Context API as well as used context works.
9
00:00:49,950 --> 00:00:57,180
Now, what you'll notice here is the same exact file, and I would want to start by adding a few things
10
00:00:57,510 --> 00:00:59,130
I would say use context.
11
00:00:59,140 --> 00:01:01,760
So that is the hook that we'll use eventually.
12
00:01:02,040 --> 00:01:02,930
And also, you know what?
13
00:01:02,970 --> 00:01:10,380
I don't like the same name, so I will remove it and I'll say context API.
14
00:01:10,830 --> 00:01:18,570
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,
15
00:01:18,930 --> 00:01:20,820
then let's say so.
16
00:01:20,820 --> 00:01:22,380
We have this a remote person.
17
00:01:22,380 --> 00:01:28,290
And again, the whole deal was that we were passing this ermold person through the list and through
18
00:01:28,440 --> 00:01:29,640
many other components.
19
00:01:29,760 --> 00:01:36,990
Of course, if we would have more components down to that one component that is looking for that particular
20
00:01:36,990 --> 00:01:37,380
function.
21
00:01:37,740 --> 00:01:38,750
So how we can fix it?
22
00:01:39,180 --> 00:01:41,750
Well, first, we would need to create the context.
23
00:01:42,510 --> 00:01:47,260
So I'm going to go above the context API and I need to come up with a name.
24
00:01:47,430 --> 00:01:50,610
So in this case, I'll say person and then context.
25
00:01:50,850 --> 00:01:52,860
Now that is equal to every act.
26
00:01:53,160 --> 00:01:54,810
And then we say DOT.
27
00:01:55,080 --> 00:01:59,490
And now we're looking for the function of create context.
28
00:01:59,730 --> 00:02:03,410
Now we can pass in some default one, but in my case, I won't do it.
29
00:02:03,750 --> 00:02:11,780
Now, the moment we do that now, we have access to two components, the provider and the consumer.
30
00:02:12,120 --> 00:02:22,390
So let's say here two components and one is going to be a provider and then the second one is the consumer.
31
00:02:22,890 --> 00:02:27,870
So with the arrival of use context, we won't use the consumer.
32
00:02:28,110 --> 00:02:33,320
Previously, before the hook was introduced, we were using the consumer.
33
00:02:33,540 --> 00:02:35,820
However, now we don't have to.
34
00:02:35,910 --> 00:02:42,810
I'm just telling you that you will get essentially two components back once you set up that create context
35
00:02:43,050 --> 00:02:47,250
and the way you access those components, you're going to go with personal context and then data and
36
00:02:47,250 --> 00:02:49,840
then provider or the consumer.
37
00:02:50,280 --> 00:02:55,010
So the thing is, provider works as a distributor.
38
00:02:55,470 --> 00:02:56,940
So what do you want to do?
39
00:02:57,270 --> 00:03:02,500
Is, for example, this is your old component, correct?
40
00:03:03,060 --> 00:03:08,670
This is where the rest of the components are rendered because you have less in line with unless you
41
00:03:08,670 --> 00:03:09,830
have a single person.
42
00:03:10,350 --> 00:03:16,940
So you'd need to find that a root component and then return of that root component.
43
00:03:16,950 --> 00:03:22,800
You would want to wrap in person context and then the provider.
44
00:03:23,710 --> 00:03:25,280
Let me show you why it's not important.
45
00:03:25,600 --> 00:03:32,770
So instead of section, I'm going to go here with a person context and then like I said, I'm looking
46
00:03:32,770 --> 00:03:33,790
for a provider.
47
00:03:34,270 --> 00:03:35,860
Not why is that important?
48
00:03:35,860 --> 00:03:37,810
Because we're a provider.
49
00:03:38,230 --> 00:03:40,630
We have the value prop.
50
00:03:40,840 --> 00:03:44,300
And what's really cool is that we can pass whatever we want.
51
00:03:44,320 --> 00:03:48,330
So we'll start very simply by passing in the hello.
52
00:03:48,790 --> 00:03:56,680
And what's even more cool, I can also use use contacts to access this value, whatever it is.
53
00:03:57,550 --> 00:04:05,980
And the shock is that if I go to a single person, I can simply say Consed and then I know that there's
54
00:04:05,980 --> 00:04:07,180
going to be some kind of value.
55
00:04:07,490 --> 00:04:10,680
So I'll call this data right now.
56
00:04:10,720 --> 00:04:12,420
We'll refactor it a little bit later.
57
00:04:12,430 --> 00:04:21,680
But phrenologists say that it is data and now let's use our use context look and inside the use context.
58
00:04:21,760 --> 00:04:27,530
OK, we need to pass this context that we created, so please don't mix the two.
59
00:04:28,060 --> 00:04:36,460
We have a person, that context provider that needs to wrap your whole componentry or later in different
60
00:04:36,460 --> 00:04:36,910
projects.
61
00:04:36,910 --> 00:04:38,650
It will wrap our whole application.
62
00:04:39,190 --> 00:04:40,750
OK, that is important.
63
00:04:40,750 --> 00:04:41,830
Please keep that in mind.
64
00:04:42,070 --> 00:04:48,330
But when we talk about personal context, we need to pass in that context into the used context.
65
00:04:48,790 --> 00:04:50,110
So don't mix and match.
66
00:04:50,110 --> 00:04:51,280
Don't say personal context.
67
00:04:51,280 --> 00:04:52,170
That provider here.
68
00:04:52,420 --> 00:04:59,650
Now here we're looking for a personal context, but we would want to wrap our componentry or our whole
69
00:04:59,650 --> 00:05:03,510
application in the person context, that provider.
70
00:05:03,520 --> 00:05:09,010
Now, of course, I keep on all the time mentioned in person context, whatever name you have over here
71
00:05:09,010 --> 00:05:09,730
for the context.
72
00:05:10,230 --> 00:05:12,100
My case, that is person context.
73
00:05:12,100 --> 00:05:17,230
If you would have been honest context, then you would go bananas, context, dot provider.
74
00:05:17,560 --> 00:05:24,340
And what's really cool that if you log data, you'll notice something really, really interesting.
75
00:05:24,830 --> 00:05:25,960
Check it out in a console.
76
00:05:26,170 --> 00:05:26,590
I have.
77
00:05:26,590 --> 00:05:26,860
Hello.
78
00:05:26,860 --> 00:05:27,130
Hello.
79
00:05:27,130 --> 00:05:27,700
Hello.
80
00:05:28,390 --> 00:05:30,130
And isn't that awesome?
81
00:05:30,700 --> 00:05:38,800
Because what that means is that I have here person context provider all the way down in my componentry
82
00:05:39,130 --> 00:05:47,560
and I can pass whatever values, regardless of how many levels deep and I'll have access without this
83
00:05:47,560 --> 00:05:48,340
prob drilling.
84
00:05:48,340 --> 00:05:52,090
So without passing it through the list.
85
00:05:52,840 --> 00:05:56,320
Now you're probably saying, OK, you're just passing a simple hello.
86
00:05:56,560 --> 00:05:57,730
I mean, it's not a big deal.
87
00:05:58,090 --> 00:06:00,450
Yeah, but remember, we are using Trask's.
88
00:06:00,490 --> 00:06:00,940
Correct.
89
00:06:01,300 --> 00:06:04,630
So why don't we pass in the object again?
90
00:06:04,990 --> 00:06:09,100
We have first Gahler basis, which just means that we're going back to George Plant.
91
00:06:09,340 --> 00:06:11,470
And in here I'm just saying object again.
92
00:06:11,710 --> 00:06:17,490
This is not some secret Ejaz X syntax where we have double Curley's.
93
00:06:17,740 --> 00:06:22,300
It just simply means, yeah, I'm going back to JavaScript and in here I would want to have an object.
94
00:06:22,750 --> 00:06:25,170
Now, what do I really want in that object?
95
00:06:25,180 --> 00:06:27,670
Well, I would want remove person.
96
00:06:27,820 --> 00:06:28,240
Correct.
97
00:06:28,690 --> 00:06:31,210
So here's what I can do and say remove person.
98
00:06:31,600 --> 00:06:37,570
And now of course I need to scroll down and I know that this is going to be an object so I can write
99
00:06:37,570 --> 00:06:41,500
a way to structure it and I can say remove person.
100
00:06:41,950 --> 00:06:46,470
And now you'll notice that our functionality still works.
101
00:06:46,840 --> 00:06:53,250
Now, of course, is going to be a big, fat, massive complaint because the name is exactly the same.
102
00:06:53,590 --> 00:06:59,470
So now what I would want is to return or to remove all these instances.
103
00:06:59,510 --> 00:07:03,580
I don't need it over here and I also don't need it over here.
104
00:07:04,270 --> 00:07:04,750
Correct.
105
00:07:05,260 --> 00:07:14,140
And lastly, I don't need it where I'm setting up my list so I can remove all of them, not which data
106
00:07:14,260 --> 00:07:17,070
is the same like I have as far as the import.
107
00:07:17,320 --> 00:07:18,550
So now let me remove it.
108
00:07:19,150 --> 00:07:28,120
And there is now my functionality still works, but I was able to go around that list.
109
00:07:28,720 --> 00:07:37,270
So if I would have two, three more components that are inside the single person, I would be still
110
00:07:37,270 --> 00:07:38,140
able to do it.
111
00:07:38,500 --> 00:07:46,840
So we set this up in a root and then whatever is set up inside here, all of those components will have
112
00:07:46,840 --> 00:07:53,620
access to whatever we pass it down into the value on this case, of course, it was just one person.
113
00:07:54,010 --> 00:07:58,510
But keep in mind that since you're setting up the object, you can do pretty much anything.
114
00:07:58,930 --> 00:08:04,480
And similarly, you can argue, well, we can also maybe omit the people.
115
00:08:04,840 --> 00:08:09,490
And you're right, because I can pass here the value of people.
116
00:08:10,030 --> 00:08:15,130
So the state value and then I can access it were well in my list.
117
00:08:15,130 --> 00:08:15,430
Right.
118
00:08:15,730 --> 00:08:20,020
So now I don't need to pass it through the component.
119
00:08:20,020 --> 00:08:25,870
As a prop, I can simply say that I want to access it using the EU's context.
120
00:08:26,140 --> 00:08:31,620
Now, in order to speed this up, I'm just going to copy and paste and I notice we have the removed
121
00:08:31,630 --> 00:08:32,050
person.
122
00:08:32,290 --> 00:08:35,800
Now, in this case, I will showcase that it is an object.
123
00:08:35,800 --> 00:08:41,200
So let me call this main data, something like that.
124
00:08:41,590 --> 00:08:48,130
And if you cancel a log, you'll see that, of course, main data will be my object.
125
00:08:48,130 --> 00:08:54,490
Now, it's going to complain that people is not defined because, of course, now you need to access
126
00:08:54,490 --> 00:08:57,130
that main data and then.
127
00:08:57,480 --> 00:08:59,760
That people now, of course, everything.
128
00:09:00,360 --> 00:09:05,550
Now, the reason why I set up a separate variable, because I want you to understand that in this case,
129
00:09:05,580 --> 00:09:12,230
we right away the structure, the removed person from the object that we're getting back in this case.
130
00:09:12,240 --> 00:09:16,650
I'm just showcasing that because we're accessing the object and you don't have to the structure.
131
00:09:16,900 --> 00:09:18,630
You want to do it this way, you can do it this way.
132
00:09:18,840 --> 00:09:24,660
Whatever is the name of the object, whatever you're getting back on, whichever property or method
133
00:09:24,660 --> 00:09:25,410
you want to choose.
134
00:09:25,680 --> 00:09:28,110
So in my case, since I'm looking for people.
135
00:09:28,320 --> 00:09:28,800
All right.
136
00:09:29,220 --> 00:09:35,190
That I just passed them, that's why I go with Maintainer and then dot people and that I'm iterating
137
00:09:35,190 --> 00:09:36,400
over now.
138
00:09:36,600 --> 00:09:38,310
A few things that I would want to mention.
139
00:09:39,830 --> 00:09:48,770
I personally don't find it that useful if I have only one level meeting with the list, I see no problem
140
00:09:49,010 --> 00:09:57,470
of passing that people state value as a prop where I would introduce the context, that is definitely
141
00:09:57,470 --> 00:10:02,720
if I have two or three or whatever levels, then it definitely makes sense.
142
00:10:03,110 --> 00:10:11,120
And also a lot of times I stick to setting up it one time globally and don't worry, we'll cover that
143
00:10:11,120 --> 00:10:18,830
in the projects were essentially we cover our whole application in that context provider.
144
00:10:19,020 --> 00:10:19,460
All right.
145
00:10:19,470 --> 00:10:25,940
On the way we do that, we need to export the person, context, the provider, as well as the main
146
00:10:25,940 --> 00:10:29,810
context, and we would need to wrap it in the index.
147
00:10:30,140 --> 00:10:33,710
Again, that is something that we'll take a look at in the projects.
148
00:10:33,710 --> 00:10:38,540
I didn't see the point of jamming everything here in editorial.
149
00:10:39,320 --> 00:10:46,350
But just keep in mind two things that I have no problem of passing this one level as a prop.
150
00:10:46,580 --> 00:10:52,240
Now, some people right away introduce the context again, that is their preference.
151
00:10:52,580 --> 00:10:57,380
It's just a lot of times I see students where once they learn about the context, they say, well,
152
00:10:57,590 --> 00:10:59,640
why we're still doing the prop drilling.
153
00:10:59,660 --> 00:11:07,730
Now, in my opinion, the prop drilling starts when we start passing in two or three levels deep and
154
00:11:07,760 --> 00:11:12,610
essentially we start passing through the components that don't need that info.
155
00:11:12,950 --> 00:11:20,240
When we look at the people that we just passed into the list and that list was using it again, I have
156
00:11:20,240 --> 00:11:24,140
no big issue over there right now.
157
00:11:24,350 --> 00:11:31,040
Last thing, I guess what I would want to do is change this title from the context API and then forward
158
00:11:31,040 --> 00:11:33,520
slash use context.
159
00:11:34,120 --> 00:11:42,410
So hopefully it is clear how we can avoid passing unnecessary data through the components.
160
00:11:42,650 --> 00:11:46,430
And now we can move on to our next topic.
15074
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.