Original subtitles

So we're using useContext

to pass the isLoggedIn state

to my other components here.

That's great.

But of course you will notice

that we're still forwarding the onLogout prop

or the logoutHandler function through props

and that's of course still not ideal.

It would be nicer if we could use the MainHeader like this.

So without passing any data to it

because we don't need to forward onLogout.

But of course at the moment this would not work.

This would mean at the moment

that we're simply not able to log out

because we're not passing our logoutHandler.

So hammering the log out button here

in the navigation wouldn't do anything.

The good thing is we can set up a dynamic context

where we don't just pass data

to our components but also functions,

which technically of course owes this data,

but still you get my point.

Here all we need to do is

in our AuthContext.Provider

where we set up the value

besides passing down isLoggedIn.

We can also pass down,

let's say onLogout

where we point at the logoutHandler

just like this.

If I do that

and make sure you don't execute it

you just wanna point at the function.

If I do that,

then every listening component

every component that listens to Auth context

we'll be able to utilize logoutHandler here

simply through the onLogout context value.

So therefore back in Navigation

where we are referring to props.onLogout

We can now simply do ctx.onLogout.

And then this will work,

because on the context object

we now have the onLogout value.

So if you save that,

now logging out works again.

And of course the rest of the app also works just fine,

as you can tell.

So this now all works again

with the help of context

where you cannot just pass down values

like strings objects and so on

but where you can also pass down functions

and therefore now, we're using this app-wide

or component-wide context object

to manage our state and to manage the function

that changes the state.

Hence we don't need props

in the navigation component anymore

and we can remove it.

And you now have a great example for using context.

Now here in my main section here,

I will still pass down the logoutHandler through onLogout

and the loginHandler through onLogin

because I directly use those handlers

in the Login and Home components.

You see in the Login component

we directly refer props.onLogin

where we're not forwarding it

We're using it here.

And the same into Home component.

I'm directly using onLogout here.

Sure, we're technically forwarding it

to our own Button component

but this is a pure presentational component.

And this here is actually fine.

I don't wanna use context inside of my Button

to always bind Button onclicks to onLogout

because whilst this would remove the need

to pass onLogout like this,

it would also mean

that our Button is now always logging the user out

and not able to do anything else upon a click.

And this all just shows you when to use props.

And when to use context.

In most cases,

you will use props to pass data to components

because props are your mechanism to configure components

and to make them reusable.

Only if you have something which you would forward

through a lot of components

and you're forwarding it to a component

that does something very specific.

Like for example, the Navigation

where this button will always log the user out.

In such cases, you wanna consider context.

And as with everything in programming

with more experience it will also

of course become clearer and more natural

when to use what.

You can of course always rely on prop chains

if you prefer that,

but context allows you to write more concise code

and it often makes managing

such app-wide state simply a bit easier.