In the last section we refactored our functional app component over to a class based one.
As I've mentioned several times now just doing this three factor alone is not going to solve the issue
that we have with the get current position call taking some amount of time.
In this video we're going to start to introduce the idea of states in react and that's the actual system
that's going to solve this problem that we're running into.
Now regarding the state system and react.
I've got some good news for you and some bad news.
The good news is that once we understand state it's really going to open the door in react and it's
going to allow us to easily make really interesting applications as opposed to the somewhat more simplistic
ones that we're working on right now.
So once we kind of get over this topic the world is our oyster and we get to start working on some pretty
interesting apps.
That's the good news.
The bad news is that traditionally working on state and learning how state works is a little bit challenging.
Trust me I've taught many many many people about react and without fail the state system ends up being
a little bit challenging.
Now when you're teaching someone a new topic as I am for you right now you're not really supposed to
tell them that hey this thing you're about to learn is really hard.
The reason I tell you that it's something challenging is so that you understand that you need to kind
of go into these next couple of videos really listening and paying attention.
I'm going to be repeating myself a lot in the next couple videos.
The same kind of facts over and over and over about state.
And the reason I'm doing that is not because I like to hear myself talk.
It's so that you can really start to internalize the ideas around state and really start to develop
an intuition of around it.
OK.
So that's my pep talk.
Without further ado let's actually start talking about states.
All right so we have previously rules of class components.
Now we're going to talk about the rules of the state system in react.
So I'm going to zoom in here.
We're going to talk about each of these items on this list right here.
Very quickly.
We'll then take a pause and then write a little bit of code to understand how state works.
So first real estate only usable with class based components which is what we just refactor to inside
of our app component.
Now I've got this little note over here.
Tiny tiny little note that only going to mention in very very brief passing.
Technically we can use state with functional components using the host system which is something that
we're going to discuss way later in the course.
But trust me that whole system my opinion way more challenging to understand than just using state inside
of a class based component.
So right now even though this is not like 100 percent really true we're just going to accept this as
reality because it makes understanding state many times easier.
OK.
So next item you will confuse prop's with state and that's a frowny face right there because this is
the unfortunate reality the prop system and the state system.
At the end of the day they are two very different things but they are very easy to get mixed up.
So we're going to go to the next couple of videos we're going to say over and over and over what the
differences are between state and prop's.
So what is state after all is discussion what is state state is a javascript object that contains some
amount of data that is relevant to a singular component.
In our case we would have one piece of state or one state property that is relevant to our app component
and that one single piece of state that one single property that we care about in our app component
is the user's current latitude which we get out of that position object.
Think about it we don't actually care about the entire position object we don't care about the like
velocity I think was in there.
There was also like a time stamp and there is also the longitude.
We don't care about those other properties for our app.
The only thing that we care about inside of here is that latitude.
That's it.
So with the state system we create a javascript object that is going to contain some amount of data
that is strictly relevant to our component that we're working on.
All right next item updating States or updating properties inside this javascript object on a component
will cause our component to almost instantly re-enter and that's going to solve one of the issues that
we ran into back over here.
Remember we want to somehow show our component on the screen when our application first starts up and
then some number of seconds later when we get the results of geolocation we then want to somehow get
our component to render itself or update the content that is showing on the screen.
So the key of getting a component to the Render is to update its States.
And that's something that we're going to reference again and again and again throughout this course
if we want to get a single component to update itself.
We will update it states.
All right.
Next item state must be initialized when a component is first created.
So the state is going to contain some amount of information that is relevant to a component and thus
when we first create the component we have to initialize our state.
That essentially means that when we create this component right here or an instance of this class we
have to initialize the state property and I'll show you how to do that in great great detail in just
a moment.
But right now I just want you understand that it must be initialized and as the last item and this one
is probably the most important one is so important I'm going to zoom in on it and I can delete these
other two so you can only see it's by itself a state property or that state object can only be updated
using the function set States.
Now we don't know what set state as yet.
We haven't spoken about it at all but I'm going to repeat this line to you nonstop because this is by
far the most common error that everyone makes when they start learning react.
They try to update their state and they do it in ways that they are used to doing with javascript which
is not the right way to do it.
So we don't have a good example of this we haven't seen what set status we haven't even seen an example
of states.
But I want to put this in your head.
We only update state using the function set States.
All right.
So going over these points is probably pretty darn confusing without seeing any code or anything like
that.
So let's take a quick pause right here.
When we come back the next section we're going to start to implement state into our app component and
that's going to give us a much better idea of what all these different rules mean.
It's a quick pause and I'll see you in just a minute.