We've now got our first example of state being used inside of Iraq component.
I want to very quickly go over a little lifecycle diagram and really explain what's going on inside
of our application step by step.
After that I'm going to show you a couple of special notes that you need to be aware of around state.
And then we'll start to work on our second example to work with it.
So let's get to it.
So everything starts with our at first booting up at some point in time we then eventually navigate
to our counter screen.
It's only at that point time like when we actually navigate to that screen that our counter screen function
runs for the very first time when that function runs for the first time.
We then initialize our counter piece of state.
It starts off with the default value of zero.
And remember it is specifically zero because when we called you state we passed in a value of zero.
Right there.
That defines the starting value of counter then at some point in the future the user eventually taps
on the increase button or maybe it's decrease either one and when that happens the on press callback
is executed.
So that's the on press callback that we passed as a prop right here inside that prop.
We then make a call to set counter remember set counter is a function that we use to update the value
of our state variable.
React does not magically detect if you and I make a change manually to the counter variable.
So the only way that we're ever going to update that variable is by calling that center function after
a very brief pause after that and I say very brief pause right here because if you technically go back
over here and do a console log of counter right after we update its value you're going to see that counter
still has the exact same value.
And the reason for that is that set counter doesn't technically update the value of counter right away.
It happens at some point time shortly after that so after a very brief pause react then we'll automatically
re render or essentially rerun our entire counter screen component that entire function gets invoked
automatically a second time the second time it runs react knows that counter screen already was executed
one time before.
So the second time it runs that state variable of counter it doesn't get somehow magically initialized
back to 0 a second time to react always knows if a component has been rendered already.
The second time it gets re rendered it's not going to be initialized again the second time that counter
screen is executed that value of counter is now going to have an updated value of one.
So if we looked at the value of counter it would then be simply one.
And so then inside of our JSA X block we can then reference that updated counter variable we can return
it from inside of that j ust X block and see the value one print up on the screen.
So that's what's going on behind the scenes.
Now I want to give you just a couple of quick notes here.
Some things you need to be aware of as we are using state.
The first thing I want to mention is that right now we are using function based state inside of a functional
component.
In other words the component we created is an actual javascript function we can also create components
out of JavaScript classes as well and inside of those other type of components we can use a very similar
state system but the syntax bird is just a little different.
We're going to eventually look at class based components later on but right now we're sticking with
functional based components just because they're kind of scene has we're react as the library is headed
towards in general the community is favoring functional components.
That's why I'm concentrating on them so much inside this course.
But you can also make use of class based components and you state with them as well.
And as I mentioned we'll take a look at that later on now I just want to repeat that we're never going
to modify directly a state variable so we're never going to write some code like that.
We're never going to write out something like counter equals counter plus one we're never going to see
counter on the left hand side of an equal sign.
That's bad and we don't want to do it.
Instead to update our state variable we are always going to use that setter function that we get back
whenever we call that use state function.
Next up we can name that state variable.
Absolutely anything we wish we called it counter because it well made a lot of sense inside this example.
We could have just as easily called it current account or my counter or whatever else you can call it
anything you wish in general just like those prop names you just want to name your state variables something
it makes sense to you and other developers.
Next up we can track any kind of data that's going to change over time.
So in this case we were tracking a number that changes.
We could also track a string or an array of objects or just about anything else so we want to track
using a state variable.
It does not have to be a simple primitive value like a number or string.
It could be more complex values as well.
One thing I want to mention in passing here is that whenever our component gets re rendered because
we update our state variable all of that components children will be rebranded as well.
So remember we can nest a react component that we create inside of another.
If we had done that for our counter screen right here.
So if we had placed another component inside of here that you and I created and then we updated our
state variable that would cause our child component to be re executed as well a second time.
So using this state thing is a really easy way to get our entire application or parts of our application
to automatically update at some point.
Anytime our data changes and finally this is the kind of thing that makes state and prompts a little
bit confusing a state variable can be passed down to a child component.
So at that point in time that value is then kind of simultaneously a piece of state and a prop as well.
And so this is where people start to get really confused on the difference between state and props.
And we're going to be definitely looking at an example of this very shortly.
So you can see exactly how it works all right.
So last thing I want to mention here just very quickly this might sound a little bit confusing when
I'd just use words to describe it.
We're gonna see an example of this with some code as well but whenever we create an instance of counter
screen in the words whenever we show counter screen on our device if we show multiple copies of it for
some reason each separate copy of this component will have its own separate state variable.
Now the reason that's relevant if you recall back inside of our components directory we created that
image detail component right here and we showed multiple copies of this three to be precise.
If we had added a state variable inside of here each of those three different copies of image does to
detail that we had created would have its own separate and independent state variable.
So essentially every time that we create an instance of a component we try to show it on the screen
every copy of it has its own separate pieces of state and once again we're going to look at an example
of that as well.
I just want to mention it in passing right now in case you're curious OK.
So that's it.
Just some high level notes around state.
So let's take another quick pause right here.
When we come back the next video we're going to start to work on our next example using state.