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.