In last video we got our application working by implementing this provider component.
So in this video I want to focus on this provider and talk about exactly what it does.
First off inside my language context not just file I went to cancel log out the object that gets returned
from calling create context.
So in front of create context I'm going to replace export default with Konst context or then do a console
log of that value and then I will actually export it.
So export default context like the old and save this and flip back over to my application.
So here is the console log right here.
You'll notice that the Context object that we created has a provider property on it that provider property
is a re-act component.
So back inside of our apts J.S. File when we referenced language context not provider.
This was a real component.
It was created for us automatically by the context system.
You'll also notice that there is a consumer property inside there as well.
You might recall that we very briefly discuss the consumer as being another way that we can consume
information out of the Context object.
All right so now that we see where that gets created I want to undo that little change we just made.
So going to change us back to being export default
create context like so.
And I want to continue telling you a little bit more about that provider element right.
Here we go.
So our parent component renders that context provider component.
And in this case you'll notice I abbreviated like language context simply as context.
Now the trick here is understanding that whatever value we assign to the value prop of that component
will be used to update our context object.
So for example if we assign the string English to the value prop our context object will be updated
to contain the value.
English as well.
There's no limit to the type of value that we can assign to the value prop.
So this could just as easily be an array of 1 2 3 and that would update the Context object with an array
of 1 2 3 as well.
The next thing I want you to understand about that provider is that we are not limited to always assigning
it a value from this outstate dealt language.
We do not have to make use of the state system when setting up this context stuff.
So we didn't have to use the value from state language here but it just happened that that is how we
put our application together as we just saw in that diagram.
This could have just as easily been English.
But of course that would have hardcoded the value of English to exist inside of our context object which
is probably not what we want.
With that in mind usually you will have a value prop coming from a props object or a state object or
something similar because you usually want to change the value inside of your length or excuse me inside
of your context object over time.
All right now the next challenge to you is a quick diagram of what happened when we rendered our application
inside the browser.
All right so we loaded up our application inside the browser.
We then created our context object of language context and we assigned it a default value of English
our app component and got rendered and we created a provider that wrapped the user create component
the provider component then updated the value of the Context object to whatever came from this dot state
DOT language.
So the instant that the provider gets rendered it takes that value prop and shoves it into the Context
object or that pipe of sorts that communicates information the button and the field component then reach
into that context object or that pipe of sorts to see the value from this dot state that language and
then the button and the fields rendered the appropriate text to the screen.
Now this entire process from right about there will get repeated any time that the user clicks on one
of those flags whenever a user clicks on a flag.
We call set state inside of our app component which causes the app component to rerun itself.
That is going to render the provider.
The provider is going to get a new value for this not state dealt language.
The button and the fields will see that the value inside the provider changed.
And so they're going to attempt to re render themselves as well with the appropriate text onto the screen.
Now there's a tremendously big gotcha inside of your Sunday it's kind of a once again not quite super
well-described inside of the official documentation is a real big gotcha around this step right here.
So you'll notice that back inside of our app component we specifically wrapped user create right here
with our provider component.
So why is that.
Well the big gotcha here is that every single time that you render out an instance of that provider
you are creating a brand new and separate pipe of information or essentially kind of a new pipe that
conveys information from the parent component down to those remote children.
Now let me show you an example of this in action.
Like I said I think it might be a little bit of a surprise.
So back inside my apt G-S file I'm going to copy paste language context down like so and then rather
than giving this a value from the start statement language I'm going to give it a completely different
value.
I'm going to hard code the value to be English like so.
Alden's save this and then I'll flip back over to the browser.
So once I'm over here I see the application render as usual.
I see.
Name a name.
So they both have English but when I click on the Dutch flag up here you'll notice that only the first
form gets re rendered with the new text.
So what's going on here.
Well let's take a look at another diagram.
OK so what here's what's going on.
Our app component is now creating two separate providers and internally each provider is creating a
separate set of user create components.
So a separate user creates separate fields separate button for each separate or each of the two providers.
Now the first provider is wired up to this outstate But language.
So anytime that provider gets rendered it creates a new pipe of sorts right here that takes the value
from this dot state DOT language and then it renders all these children down here user create field
and button with a value from this dot state DOT language.
The second provider how however creates a totally separate pipe of sorts right here that contains the
value that the provider is trying to communicate down to all those separate components or all the user
create components down here.
So the separate provider has its own value of English and its always English.
So the string of English gets shoved into this pipe right here.
And no matter how many times we render this provider it's always going to contain the value of English.
So this user creates this field and this button always see the string of English.
There is no automatic crossover to this separate pipe over here.
So even if we update the value inside this provider the second set of user create field and button will
never see that updated value because they always see the hardcoded value of English.
So the real lesson here is that provider is essentially creating a separate type of information every
single time you use it every time you use provider.
You have this separate channel of information flowing down to a separate set of components.
Nonetheless I want to mention around the use of provider here is that we can still continue to render
user create all by itself.
If I put user create down here like so I am now creating an instance of user create that is always going
to get its value from default value and its never going to be given a value from provider.
So now that separate user create is always going to get the default value which for me right now is
English.
So to really show this in action I'm going to go back over here.
I'm going to change the second provider to be Dutch instead because now we'll see one instance of user
create that's going to change every time that we click on that button.
We'll see one instance of user create that gets the value out of the provider and we'll see one instance
of user create that always gets just the default value and never sees any update.
So let's now save this and test out really quick I guess.
Back over here I see English I see the Dutch with a provider and I see English that has no provider
attached.
So now a click on it Dutch up here will see the first one update.
The second one stays the same.
And the last one stays the same as well.
So again the second one gets its value from a fixed provider that always has Dutch.
The last one gets its value from the default value that context object that is always set to English
and only the first one actually sees that update.
So like I said this context stuff man it's like more complicated than it appears at first glance you
know.
I kind of wish that the API had been designed a little bit more.
I don't know obviously because once you start running into this stuff it just gets a little bit crazy
and I feel like the documentation doesn't do a super good job of explaining this kind of nasty stuff.
But anyways I think we got a good idea of what's going on here.
So let's take a quick pause and take a look at one less thing in the last in the next video.