In this video we're going to write out our first example using state just as a quick disclaimer here.
We're going to first write out a little example that's not going to be quite correct.
I know it's really confusing any time someone shows you the wrong way to do something when you're first
learning it but I'm doing this for a very particular reason you'll see it very shortly.
So I'm going to first write out some slightly incorrect code and then we're going to fix it right away.
It'll be really sure to tell you exactly what is incorrect about it.
All right.
So back inside of my counter screen component I'm going to first begin by adding in two button elements
so add in a button right here and I'll give it a titled problem.
So this first one will be increase our counter on duplicate that down.
And the second one will be decrease.
All right.
Next up I'm going to declare a new variable at the top of our function going to say let.
Counter and I'll give it a starting value of zero.
Like so.
So this right here this is the first line I'm going to write.
This is not quite correct to initialize a piece of state.
So we're gonna come back I'll say to do X this again I want to show you this example with some slightly
incorrect code for a very particular reason.
Now we had said that anytime a user taps on this button or this button we want to modify the value of
counter.
So we want to increase it by 1 or decrease it by 1.
To do so we will add up in on press Prop 2 Our increase component.
I'll give this thing an aero function and I'm going to give it a body so I'll put in a set of curly
braces.
And then inside of here I'll put a new line and say counter plus plus remember what counter does counter
version me plus plus does that increments a variable by 1 and I'll repeat the same thing or decrease
as well.
So I'll write in an era function with the body and I'll put in counter minus minus.
And then finally inside this text element right here I'm gonna add encounter or current count and then
I'll print out the current value of counter inside their okay.
So let's say this right here once again this is not going to work as expected but I want to you to see
exactly what happens.
It's going to flip back over.
I'm gonna go to the counter demo and then I'll click on increase and decrease in of course nothing actually
happens here.
So why is that.
Well essentially inside of a react component we can reference variables like this all day.
And behind scenes the value of counter really is changing.
For example inside of this first on press right here right after I do the counter increment i could
do a console log of counter and I can do another one on the second on press as well console log counter
down here as well.
It's going to save this and I'll retry this really quickly.
So I'll hit increase a couple of times and then decrease a couple of times.
I'll then go back over to my terminal and I can very easily see that we have had some console logs here
and every time the counter variable has either increased or decreased depending on which button I hit.
So why didn't the screen actually update.
Well it's a very simple reason by default react does not just kind of magically watch a variable and
say hey whenever this variable changes I'm just going to magically update.
There's no automatic detection of some variable changing inside of our components.
So instead when we add in a piece of states as our counter is supposed to be we're going to instead
use a little function from react this function that we're going to use to create a state variable is
going to have this kind of magic step built in for us when we create a variable with this magic little
function from react react is going to automatically watch the value of that variable and whenever we
change it react is going to automatically update the content on our screen.
So that's the end of the bad code that we've now written out.
Let's now replace some of this bad code with good stuff that's actually going to work appropriately.
So to get started up at the top from react I'm going to import use.
State you state is what you referred to as a hook a hook is a function that add some new functionality
to a function component which is what we are using right here we can use this you state function to
make a very special kind of variable that React is going to essentially watch and in time we update
its value it's going to automatically update our component on the screen now with the you state we're
going to use that to initialize our piece of state here as opposed to doing a normal variable declaration
so I'm going to delete the left counter.
I'm also going to delete the fix this.
And then instead I'm going to write out const I'm going to use a little bit of weird syntax here.
I'm going to put in some square brackets and I'll say counter and then set to counter equals use state
like so and then into you states are going to enter in as a first argument zero OK so there's a lot
going on here on this line right here.
Let's break down what's happening.
First off when we call you state I passed in a z value of zero.
We're using you state to initialize a new piece of state or new piece of data that we're going to track.
Remember we made a big point in these diagrams we looked at over here about talking about what the data's
starting or default value is whenever we call you state.
We're going to pass in the starting value or the default value of that piece of data.
So in this case I put in zero right here because I want my counter to have an initial value of zero.
Next up on the left hand side is equal sign.
What are those square brackets right there.
Well this is what I referred to as Array D structuring.
This is another way of pulling some elements or a reference to elements out of an array.
Let's flip back over to our browser really quick and I'll write out a quick example to show you exactly
what's going on with that OK.
So I can use my browser or the console inside of it just to give you a very quick example here.
I'm going to declare declare a new array called Colors and I'll give it a value of red and green like
so I can now access different elements inside that array by writing out simply colors at 0 or colors
at 1.
But another way that I could do this if I wanted to take both the first and second elements out there
and assign them to a variable all in one step I could write out const color 1 and color 2 equals colors.
So this is essentially saying hey javascript we understand that colors is in array.
So we want you to take the first element out of colors and assign it to the variable color one and then
the second element out of colors and assign it to the variable color to the variable names right.
You're off color 1 in color 2.
They can be anything we want.
So I'll run that.
Now if I print out color one I'll see red and color two is green so the syntax you see back over here
this array de structuring we're only using because it just gives us a slightly easier time of accessing
whatever you state returns to us OK.
So now inside of here we've got a counter variable.
This is our piece of state that's going to change over time.
Now here's the one catch the one thing you need to be aware of.
Anytime we want to update or change this piece of state we're never going to modify the counter variable
directly this counter plus plus right here we'll modify the counter variable directly and we don't want
to do that.
As I mentioned reactor's not magic it's not going to somehow detect magically that we change that variable.
So this is bad right here and I'll put in a comment that says Don't do this.
We don't modify a state variable directly.
Instead anytime we want to change a state variable we're going to use the second thing that comes back
to us when we call you state.
This is a function called set counter.
Anytime we want to update our piece of state we're going to call that function right there with the
new value that we want counter to be so in other words inside of our first button right here.
Anytime we click or tap on that button I'm going to remove the console log inside of here.
We probably want to increase the value of counter so to do so we can use the set counter function.
So I will call set counter and I'll say counter plus 1 Now notice when I call counter plus one right
here that doesn't modify counter in other words adding one to a number doesn't change that variable.
We're just using its current value.
We're adding one to it and that returns a new value that does not get assigned back to counter I can
now do the same thing down here in the second button as well.
So I got to delete everything inside of on press and replace it with set counter counter minus one
anytime we call these set counter function.
React is going to automatically rerun this entire function component we have created.
So the entire counter screen component like everything inside of here is going to be executed again.
But the second time it gets executed a value of counter right here will now be whatever we passed into
set counter.
So in this case counter plus one or counter minus one.
OK.
So I'm doing a lot of talking here.
Let's just see this and see what happens.
So I'll save the file I'll go to the counter demo and now I can click on increase and we'll see the
current count increase by 1 and decrease will make it decrease by 1 now learning state for the very
first time is usually pretty darn confusing.
So at this point everything inside of here if this looks kind of confusing don't sweat it because as
I mentioned we're going to go over several examples exactly like this to help you understand exactly
what's going on.
Let's take a quick pause right here in the next video what we will do a quick review of the code we
just wrote and we will start on a second little example with state.