All language subtitles for 070 Context API _ useContext.en_US

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian Download
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.