In this video we're going to start talking about the contex system in re-act the context system was
recently introduced with re-act version 16 a previous version of context existed in releases before
that.
But in version 16 we got a new version of context or essentially a revamped version of context.
When this feature came out inside of reacts everyone kind of rejoiced and said oh we don't have to use
redux anymore but that's a little bit of a stretch.
So in this video and the next couple are going to tell you more about the context system and help you
understand what void or what purpose it really fills inside the re-act world.
So let's get to it.
Now the first thing I want to understand is exactly what the context system is Draut this course we've
been making use of the props system in react and with the props system you and I have been passing pick
data from a parent component to a direct child component with the context system.
We are doing almost the exact same thing the context system is all about communicating information.
The only difference is that with the contex system we are passing data from any parent component to
any arbitrary nested child component.
Now of course when just show you these text definitions right here they probably don't make a lot of
sense.
So let's take a look at this in Diagram format.
OK.
So this right here is a diagram of some imaginary application that is communicating data by using the
props system at the very top.
We've got some app component that is showing a header and the header is showing some button component.
So all three these white boxes are Riak components.
Let's imagine for a second that the app component wants to customize the text shown inside the button
to do so we might create a new prop called button text and pass that from the app component down into
the header.
So there's the button text Propp right there.
It would then be the responsibility of the header to make sure that it passed that prompt down into
the button to customize how the button is displayed on the screen.
So nothing new about this.
This is the same old Propp system that you are used to data going from a direct parent to a direct child.
So let's look at the same application or the same little hierarchy right here using the context system
instead.
All right so here it is with context with the context system we are still communicating information
from a parent component down to a child.
The only difference is that with context we can communicate from any arbitrary parent to any arbitrary
child.
It does not have to be a direct one to one communication.
In other words parent down to direct child.
In other words with the contex system we can communicate data from some very high up parent down to
some very deeply nested child.
Now that in total is the context system that is the purpose of the context system.
It is all about communication of data and that is it.
As I said just a little bit ago a lot of people have said oh yeah we don't have to use redux anymore
or anything like that with context.
But that's not necessarily the case.
The contex system is just about communication.
There are some patterns that we can use now with context that we're not quite so easy before.
But at its core context is just like props.
It's just about communicating information and nothing else.
Now in order to get a better idea of how we actually make use of context let's take a quick pause right
here and when we come back the next section we'll talk about a little application that we're going to
put together.
So quick pause and I'll see you in just a minute.