All language subtitles for 014 Using the React Context API_en

So as I mentioned,

we have this React Context Concept,

which allows us to manage State

kind of behind the scenes in React,

such that we actually are able to directly change it

from any component in our App

and directly pass it to any component in our App

without building such a prop chain.

For that here in my source folder,

next to my components folder,

I will add a new folder, Context

and you don't have to name it Context.

You could also name it State or store

often such App by it's State is also named store.

So maybe let's go with that.

And in there, I'll add a new file

and since we're going to manage some authentication State

I will add Auth-Context in there.

So hence I will name the file Auth-Context.js,

the exact naming is up to you though.

You could also name it AuthContext like this,

So in this Pascal case notation

but this would imply that

we're going to store a component in there

and that's not directly what we were doing.

Hence, I'll go for this naming using Kebab case.

So Auth-Context.js and I can say right away,

you can have multiple Contexts

for multiple global States in your app

and of course, you can also use just one Context

for a bigger State, that's all up to you

but let's maybe just learn how Context works.

So we've get to Auth-Context.js file

and in there we import React from React

as if we would build a component

but we're not going to do that.

Instead on React, I'm going to call, create Context

and does does what the name implies.

It creates such a Context object in the end.

Now create Context takes a default Context

and Context here really is just your app

or component white State.

So it's up to you what that State should be.

It could be something simple like just a string, my State.

if your app white or a component white State

is just some texts.

You could have some well, text as your default State.

Often though it will be an object,

it will be an object where you, for example, in our case,

managed IsLoggedIn State

and set this to false initially, let's say.

Now what we get back from create Context

is something interesting though.

It will be a component or it will be an object

that also contains components, let's put it like this.

So we get back AuthContext

and I'll name it like this because

whilst Auth-Context itself is not a component,

it is an object that will contain a component.

Now we don't need this object here though,

instead we'll need it in the other components.

So I'll export it as a default

to make it available in our files.

So now we can import this specific Context object

and to then use Context in your app

you need to do two things.

You need to provide it, which basically tells React,

"Hey, here's my Context."

All components that are wrapped by it

should have access to it

and I'll come back to that wrapping part in a second.

And besides providing, you then need to consume it.

You need to hook into it, you need to listen to it,

if you wanna call it like this.

Now, providing is always the first step.

Providing means that you wrap in JSX code

all the components that should be able to tap

into that Context.

So that should be able to listen to that Context.

Any component that's not wrapped will not be able to listen.

So here, if we know that we need this Context

everywhere in the entire application.

So in all components possibly,

we wanna wrap everything in app component with it.

If we knew that we only needed,

let's say, in the log in component and its child components,

we could only wrap to login component.

But here we'll need it in the main header,

we'll need a down there, we'll need it everywhere.

So therefore,

we can wrap

our main header

and this main section with Auth-Context

and for that we will need to import it.

So make sure you add this import from store Auth-Context

to import this Auth-Context object.

And I said that this itself wouldn't be a component

in JSX we need a component though,

but with a dot we can access a property

on this Auth-Context object that contains a component

and that's the provider.

Auth-Context provider is a component

we can use in our JSX code,

and we can wrap it around other components

and those other components

and all their descendant components.

So all their children

and their children's children and so on,

all those components will now have access to that Context.

Now, since we use Auth-Context as a wrapper here,

we can now technically also use React Fragment

because we got this wrapping component

as a root level component I returned here

and with that, the main header,

but also to log in and the home component

and all their children will have access to Auth-Context.

So now we provide this.

Now, we have the second part

and that is the listening part

to get access to our value,

which at the moment is always just this default value,

which never changes.

We're going to work on that too, of course,

but to have access to that value, we need to listen

and we can listen in two ways.

We can listen by using Auth-Context consumer

or by using a React Hook.

Now we'll typically use the React Hook,

but let me show you the other alternative

to consumer as well.

Let's say here in navigation, we're interested in knowing

whether the user isAuthenticated or not.

For that we can also use Auth-Context steer

and wrap everything where we need data from it

with that consumer.

So here, for example, we could wrap the entire component

with Auth-Context.

Again, make sure to import it, of course

dot consumer now.

Previously we had the provider, now we have the consumer.

The consumer works a bit differently though.

The consumer takes a child

which actually should be a function

between curly braces like this

and as argument, you'll get your Context data.

So in our case, you'll get this object here.

And then,

in this function you should return your JSX code,

which should have access to that data.

So here I'm grabbing all that NAV code, I'm returning that

and in there, I now for example,

have access to ctx.isLockedIn

because my Context object is this object here

and there I have it IsLockedIn prop.

Now, if you save that, you will however see

if you reload that this crashes.

And the reason for that,

is that we do have a default value here,

but this default value will actually only be used

if we would consume here without having a provider.

So technically the provider is not even needed,

however, you should memorize this pattern

I explained earlier, where you need the provider.

Technically, you don't need it if you have a default value,

but in reality, you will use Context

to have a value which can change

and that will only be possible with a provider.

So therefore, to make sure that this does not crash,

let's go back to the provider

and they're on the provider component

you can add a value prop,

and this has to be named value

because this is not a component by you

and to do that you can also pass your object.

So in this case, I will just repeat my default object here,

but now you would be able to change that object,

for example, through State and the app component.

And whenever it changes, the new value will be passed down

to all consuming components,

but that is something I will also come back to in a second.

So here, let me save this

and now it reloads without problems.

Now of course, if I now log in,

you will see that we only have one link here

so that first link, the user's link is missing

because there I'm pulling data from my Context

and that at the moment is never changing.

So let's make sure we can change it

before I then show you the alternative consumer.

Here changing it is easy,

we have set up the here in the app component

and there we manage to IsLockedIn State anyways.

So instead of hard coding our IsLockedIn value,

in the value we pass to the provider,

we can set it to IsLockedIn, of course.

And if we do that, this value object

will be updated by React whenever IsLoggedIn changed.

And that new object, that new Context object

will be passed down to all listening components.

So to all components where we consume this Context.

The difference to before is

that we don't need to use a prop to forward that therefore.

Instead we just set it on the provider

and then everywhere in all child components,

we can listen to that.

So here we could remove the isAuthenticated prop

on the main header

and in the main header therefore, stop forwarding it

to the navigation.

and in navigation, we could now use Context.IsLoggedIn

everywhere where we need the IsLockedIn information.

And that's now where we break up that props chain,

where we stop forwarding that data,

which we don't need in the main header

and where we instead leverage Context.

So now if I reload you see that still works

and now the link is back,

but now we're using Context here.

Now I did mention, however that

the consumer is just one way of consuming our Context.

It's an okay-ish way, but I don't like that syntax too much

having that function that then returns our code.

You can do that, but there actually is a more elegant way

and more elegant solution using the use Context Hook.