1
00:00:00,610 --> 00:00:04,980
In last video we got our application working by implementing this provider component.

2
00:00:04,980 --> 00:00:09,190
So in this video I want to focus on this provider and talk about exactly what it does.

3
00:00:09,240 --> 00:00:15,420
First off inside my language context not just file I went to cancel log out the object that gets returned

4
00:00:15,420 --> 00:00:17,550
from calling create context.

5
00:00:17,610 --> 00:00:24,990
So in front of create context I'm going to replace export default with Konst context or then do a console

6
00:00:24,990 --> 00:00:28,630
log of that value and then I will actually export it.

7
00:00:28,680 --> 00:00:35,820
So export default context like the old and save this and flip back over to my application.

8
00:00:35,820 --> 00:00:37,720
So here is the console log right here.

9
00:00:37,770 --> 00:00:43,320
You'll notice that the Context object that we created has a provider property on it that provider property

10
00:00:43,380 --> 00:00:45,440
is a re-act component.

11
00:00:45,540 --> 00:00:50,190
So back inside of our apts J.S. File when we referenced language context not provider.

12
00:00:50,220 --> 00:00:51,530
This was a real component.

13
00:00:51,530 --> 00:00:56,140
It was created for us automatically by the context system.

14
00:00:56,150 --> 00:00:59,910
You'll also notice that there is a consumer property inside there as well.

15
00:00:59,940 --> 00:01:04,560
You might recall that we very briefly discuss the consumer as being another way that we can consume

16
00:01:04,590 --> 00:01:08,220
information out of the Context object.

17
00:01:08,220 --> 00:01:13,270
All right so now that we see where that gets created I want to undo that little change we just made.

18
00:01:13,420 --> 00:01:16,350
So going to change us back to being export default

19
00:01:19,040 --> 00:01:20,840
create context like so.

20
00:01:21,140 --> 00:01:26,320
And I want to continue telling you a little bit more about that provider element right.

21
00:01:26,390 --> 00:01:27,190
Here we go.

22
00:01:27,590 --> 00:01:31,910
So our parent component renders that context provider component.

23
00:01:31,910 --> 00:01:36,620
And in this case you'll notice I abbreviated like language context simply as context.

24
00:01:36,620 --> 00:01:41,630
Now the trick here is understanding that whatever value we assign to the value prop of that component

25
00:01:41,900 --> 00:01:44,720
will be used to update our context object.

26
00:01:44,720 --> 00:01:51,320
So for example if we assign the string English to the value prop our context object will be updated

27
00:01:51,320 --> 00:01:52,580
to contain the value.

28
00:01:52,640 --> 00:01:54,230
English as well.

29
00:01:54,240 --> 00:01:57,830
There's no limit to the type of value that we can assign to the value prop.

30
00:01:57,830 --> 00:02:03,710
So this could just as easily be an array of 1 2 3 and that would update the Context object with an array

31
00:02:03,710 --> 00:02:07,150
of 1 2 3 as well.

32
00:02:07,300 --> 00:02:11,830
The next thing I want you to understand about that provider is that we are not limited to always assigning

33
00:02:11,830 --> 00:02:14,460
it a value from this outstate dealt language.

34
00:02:14,560 --> 00:02:19,160
We do not have to make use of the state system when setting up this context stuff.

35
00:02:19,300 --> 00:02:23,740
So we didn't have to use the value from state language here but it just happened that that is how we

36
00:02:23,740 --> 00:02:26,830
put our application together as we just saw in that diagram.

37
00:02:26,830 --> 00:02:29,070
This could have just as easily been English.

38
00:02:29,200 --> 00:02:34,450
But of course that would have hardcoded the value of English to exist inside of our context object which

39
00:02:34,450 --> 00:02:36,190
is probably not what we want.

40
00:02:36,190 --> 00:02:42,460
With that in mind usually you will have a value prop coming from a props object or a state object or

41
00:02:42,520 --> 00:02:47,870
something similar because you usually want to change the value inside of your length or excuse me inside

42
00:02:47,890 --> 00:02:50,640
of your context object over time.

43
00:02:50,660 --> 00:02:55,030
All right now the next challenge to you is a quick diagram of what happened when we rendered our application

44
00:02:55,060 --> 00:02:56,950
inside the browser.

45
00:02:56,950 --> 00:03:00,220
All right so we loaded up our application inside the browser.

46
00:03:00,520 --> 00:03:06,900
We then created our context object of language context and we assigned it a default value of English

47
00:03:08,480 --> 00:03:14,150
our app component and got rendered and we created a provider that wrapped the user create component

48
00:03:15,350 --> 00:03:21,230
the provider component then updated the value of the Context object to whatever came from this dot state

49
00:03:21,220 --> 00:03:22,370
DOT language.

50
00:03:22,400 --> 00:03:27,290
So the instant that the provider gets rendered it takes that value prop and shoves it into the Context

51
00:03:27,290 --> 00:03:33,290
object or that pipe of sorts that communicates information the button and the field component then reach

52
00:03:33,380 --> 00:03:39,530
into that context object or that pipe of sorts to see the value from this dot state that language and

53
00:03:39,530 --> 00:03:43,310
then the button and the fields rendered the appropriate text to the screen.

54
00:03:43,310 --> 00:03:49,910
Now this entire process from right about there will get repeated any time that the user clicks on one

55
00:03:49,910 --> 00:03:52,640
of those flags whenever a user clicks on a flag.

56
00:03:52,670 --> 00:03:57,980
We call set state inside of our app component which causes the app component to rerun itself.

57
00:03:58,100 --> 00:04:00,890
That is going to render the provider.

58
00:04:01,070 --> 00:04:05,310
The provider is going to get a new value for this not state dealt language.

59
00:04:05,420 --> 00:04:09,410
The button and the fields will see that the value inside the provider changed.

60
00:04:09,410 --> 00:04:15,110
And so they're going to attempt to re render themselves as well with the appropriate text onto the screen.

61
00:04:15,110 --> 00:04:22,400
Now there's a tremendously big gotcha inside of your Sunday it's kind of a once again not quite super

62
00:04:22,400 --> 00:04:28,640
well-described inside of the official documentation is a real big gotcha around this step right here.

63
00:04:28,640 --> 00:04:34,010
So you'll notice that back inside of our app component we specifically wrapped user create right here

64
00:04:34,280 --> 00:04:35,880
with our provider component.

65
00:04:35,900 --> 00:04:37,280
So why is that.

66
00:04:37,280 --> 00:04:43,790
Well the big gotcha here is that every single time that you render out an instance of that provider

67
00:04:43,960 --> 00:04:50,540
you are creating a brand new and separate pipe of information or essentially kind of a new pipe that

68
00:04:50,540 --> 00:04:55,910
conveys information from the parent component down to those remote children.

69
00:04:55,910 --> 00:04:57,700
Now let me show you an example of this in action.

70
00:04:57,750 --> 00:05:00,710
Like I said I think it might be a little bit of a surprise.

71
00:05:00,740 --> 00:05:10,340
So back inside my apt G-S file I'm going to copy paste language context down like so and then rather

72
00:05:10,340 --> 00:05:14,660
than giving this a value from the start statement language I'm going to give it a completely different

73
00:05:14,660 --> 00:05:15,500
value.

74
00:05:15,560 --> 00:05:18,920
I'm going to hard code the value to be English like so.

75
00:05:19,440 --> 00:05:22,740
Alden's save this and then I'll flip back over to the browser.

76
00:05:23,330 --> 00:05:26,190
So once I'm over here I see the application render as usual.

77
00:05:26,270 --> 00:05:26,780
I see.

78
00:05:26,780 --> 00:05:27,520
Name a name.

79
00:05:27,540 --> 00:05:32,840
So they both have English but when I click on the Dutch flag up here you'll notice that only the first

80
00:05:32,840 --> 00:05:35,920
form gets re rendered with the new text.

81
00:05:35,930 --> 00:05:37,230
So what's going on here.

82
00:05:37,430 --> 00:05:39,290
Well let's take a look at another diagram.

83
00:05:39,740 --> 00:05:41,440
OK so what here's what's going on.

84
00:05:41,660 --> 00:05:47,870
Our app component is now creating two separate providers and internally each provider is creating a

85
00:05:47,870 --> 00:05:50,630
separate set of user create components.

86
00:05:50,630 --> 00:05:56,660
So a separate user creates separate fields separate button for each separate or each of the two providers.

87
00:05:56,660 --> 00:06:00,120
Now the first provider is wired up to this outstate But language.

88
00:06:00,170 --> 00:06:05,960
So anytime that provider gets rendered it creates a new pipe of sorts right here that takes the value

89
00:06:05,960 --> 00:06:11,600
from this dot state DOT language and then it renders all these children down here user create field

90
00:06:11,630 --> 00:06:15,330
and button with a value from this dot state DOT language.

91
00:06:16,560 --> 00:06:22,710
The second provider how however creates a totally separate pipe of sorts right here that contains the

92
00:06:22,710 --> 00:06:27,660
value that the provider is trying to communicate down to all those separate components or all the user

93
00:06:27,660 --> 00:06:29,080
create components down here.

94
00:06:29,400 --> 00:06:34,820
So the separate provider has its own value of English and its always English.

95
00:06:34,920 --> 00:06:38,200
So the string of English gets shoved into this pipe right here.

96
00:06:38,340 --> 00:06:44,470
And no matter how many times we render this provider it's always going to contain the value of English.

97
00:06:44,520 --> 00:06:49,330
So this user creates this field and this button always see the string of English.

98
00:06:49,340 --> 00:06:53,670
There is no automatic crossover to this separate pipe over here.

99
00:06:53,670 --> 00:06:59,400
So even if we update the value inside this provider the second set of user create field and button will

100
00:06:59,400 --> 00:07:04,470
never see that updated value because they always see the hardcoded value of English.

101
00:07:04,470 --> 00:07:11,040
So the real lesson here is that provider is essentially creating a separate type of information every

102
00:07:11,040 --> 00:07:14,480
single time you use it every time you use provider.

103
00:07:14,550 --> 00:07:20,070
You have this separate channel of information flowing down to a separate set of components.

104
00:07:20,070 --> 00:07:25,020
Nonetheless I want to mention around the use of provider here is that we can still continue to render

105
00:07:26,710 --> 00:07:29,200
user create all by itself.

106
00:07:29,620 --> 00:07:35,380
If I put user create down here like so I am now creating an instance of user create that is always going

107
00:07:35,380 --> 00:07:41,910
to get its value from default value and its never going to be given a value from provider.

108
00:07:41,950 --> 00:07:46,570
So now that separate user create is always going to get the default value which for me right now is

109
00:07:46,630 --> 00:07:47,430
English.

110
00:07:47,440 --> 00:07:50,400
So to really show this in action I'm going to go back over here.

111
00:07:50,410 --> 00:07:56,170
I'm going to change the second provider to be Dutch instead because now we'll see one instance of user

112
00:07:56,170 --> 00:07:59,370
create that's going to change every time that we click on that button.

113
00:07:59,440 --> 00:08:05,890
We'll see one instance of user create that gets the value out of the provider and we'll see one instance

114
00:08:05,890 --> 00:08:10,490
of user create that always gets just the default value and never sees any update.

115
00:08:10,720 --> 00:08:14,560
So let's now save this and test out really quick I guess.

116
00:08:14,570 --> 00:08:21,470
Back over here I see English I see the Dutch with a provider and I see English that has no provider

117
00:08:21,470 --> 00:08:22,430
attached.

118
00:08:22,760 --> 00:08:26,090
So now a click on it Dutch up here will see the first one update.

119
00:08:26,120 --> 00:08:27,350
The second one stays the same.

120
00:08:27,380 --> 00:08:29,380
And the last one stays the same as well.

121
00:08:29,390 --> 00:08:34,170
So again the second one gets its value from a fixed provider that always has Dutch.

122
00:08:34,190 --> 00:08:40,070
The last one gets its value from the default value that context object that is always set to English

123
00:08:40,310 --> 00:08:44,130
and only the first one actually sees that update.

124
00:08:44,250 --> 00:08:50,640
So like I said this context stuff man it's like more complicated than it appears at first glance you

125
00:08:50,640 --> 00:08:51,160
know.

126
00:08:51,450 --> 00:08:54,970
I kind of wish that the API had been designed a little bit more.

127
00:08:55,020 --> 00:08:59,640
I don't know obviously because once you start running into this stuff it just gets a little bit crazy

128
00:08:59,640 --> 00:09:04,620
and I feel like the documentation doesn't do a super good job of explaining this kind of nasty stuff.

129
00:09:04,620 --> 00:09:07,100
But anyways I think we got a good idea of what's going on here.

130
00:09:07,120 --> 00:09:11,720
So let's take a quick pause and take a look at one less thing in the last in the next video.