Hey guys. In this lesson I want to tackle this idea of state and introduce you to React 1
hooks as a way of being able to make our website interactive and actually have changeable state. 2
Go ahead and fork 3
the starting project for this lesson. And once you're done 4
have a look at what we've got here now. 5
Unlike our previous React apps, I've actually got all of my React code currently living inside my index 6
.js and there's a reason for this that you're going to discover very soon. 7
But inside our index.js 8
the code is very simple. 9
All that we're doing is rendering a single div that has an and a button contained inside it. 10
The idea is simple. How can we get this button to trigger an update in this number so that every time 11
the user presses on this plus button, this number actually goes up in value? 12
So let's think about how we might approach this. 13
Well firstly, this has a hardcoded value in it. 14
So that's not going to work. 15
So let's go ahead and create a new variable called count and let's set it equal to zero and then we'll 16
replace this hardcoded value with this variable count. 17
Nothing has changed so far in the user interface. 18
Now the next thing we need to do is to be able to trigger some piece of code to happen whenever this button 19
is clicked. 20
So we know from our HTML that all of our button elements have a attribute called onClick. And we 21
can set that to equal some sort of function to be triggered when this button receives a click action. 22
Now we know that when we're creating React components that all of these HTML elements and their attributes 23
gets converted into camel case, 24
so something like this. So we can in fact set this onClick attribute to a function in our code. 25
So let me create a function called increase and all that I'm going to put inside is just a simple log 26
statement saying, 'I got clicked.' And now in our onClick I'm going to add a set of curly braces and assign 27
it that function. 28
Now what should happen is when I click this plus button, then it should call this function increase and 29
it should log this message and indeed it does. 30
If you look inside the console I get a new message being logged every time I press this button. 31
So our code is working. But how can we increase the count that's being shown here? 32
Well one way you might think of doing this is to simply just write count++ 33
and this should increase the value of count every time the function increase is called. 34
And indeed it does. 35
Let's go ahead and log the value of count inside the increase function 36
and then I'm going to click on the plus button. And you can see that in the console which is logging 37
the value of count, it is indeed increasing by 1 38
each time I press the button. But our user interface is not changing at all. 39
Nothing is happening. 40
It looks dead to me. 41
So what's going on here? 42
Well remember that even though we're writing HTML elements, they're not actually real elements right? 43
We're relying on the ReactDOM to actually render each of these elements onto the screen. 44
So if we wanted to update what's on screen we actually have to re-render all of this. 45
So if we wanted this to update, one way of doing this instead of console logging would be to call React 46
DOM.render all over again inside our function. 47
Now if I hit save and I click the plus button, you can see that it does indeed work. 48
And every time I press this button effectively what it's doing is re-rendering everything that's on 49
screen which is our div and our and our button. 50
And this is kind of inefficient 51
right? 52
And besides the code also looks terrible. 53
We have all of this repetition 54
that's not really doing anything for us. 55
So how do people actually solve this problem using React? 56
Well this is where hooks come in. And there's a hook code useState that is perfect for this situation. 57
But one of the rules for using hooks is that you must use a hook inside a functional component. 58
So we have to create a function that renders a component and then inside that function we can use hooks. 59
So let's go ahead and import our App.jsx 60
and move all of our code into our App.js. And then back in our index.js 61
all we need is our ReactDOM.render. 62
And then we're just rendering a simple app component. 63
So now we can focus on our app component. 64
And I'm going to just start off by wrapping everything inside a function which is called App so that 65
this gets rendered and instead of using ReactDOM.render and all of this document get element etc.. 66
All I'm gonna do is just use the return statement so that this becomes the output of our app component 67
and it gets created on screen which you can see right here. 68
Now I'm gonna delete all of this repeated ReactDOM code and you should be left with something that 69
looks like this. 70
Now inside our app component instead of using this count, I'm going to create a new constant that I'm 71
going to call state and I'm going to set the state to React. 72
useState which is a function. 73
Now this useState function comes from the React module so I can either call it like this or as you've 74
seen from the import and export lesson 75
we can also just add a comma and then a set of curly braces and import that use state function as a 76
non default export. 77
So now instead of saying React.useState I can simply just write useState whenever I need it. 78
Now what is this use 79
State 80
exactly 81
anyways? So I'm going to go ahead and comment out my count and also I'm going to delete the count that 82
currently lives inside my so that I get rid of my errors. And instead I'm just going to log what this 83
state is actually equal to. 84
Notice how state holds the return value of this function useState. 85
And if I log it you can see it's comprised of an array with two items. The first item seems to be undefined 86
and the second item is some sort of function. 87
If I go ahead and add a value in here let's say 0 88
and again my console log gets triggered, 89
you can see the first value of my array gets replaced with whatever it is that I put in here. 90
What's inside these parentheses is basically our starting state and if we wanted to get hold of this 91
value through this state we can simply say state and [0]. 92
So that gets hold of the initial value that we put into this function. 93
And of course now we can then use this state inside our React component. 94
So I'm going to replace that hardcoded 0 once more but this time I'm going to tap into this new array 95
called state and get hold of the first value. And you can see it's now being displayed on screen. 96
And whenever I change my state, you'll see it update automatically in our . 97
So effectively we're telling this h<1> to track the value of our state. 98
And whenever the state updates then it should also re-render this . This way 99
it's way more efficient than us calling ReactDOM.render and it only updates the parts that need to 100
be changed, such as this . 101
Now because the output of useState is an array we're forced to write code like this. If we want to get 102
hold of the first item out of that array, we're using this square bracket notation which is very ugly 103
because it has no meaning. At some point down the line we're going to forget what state zero is and it's 104
gonna be hard to debug other issues when they come up. 105
Now in JavaScript 106
ES6 107
there's this concept called destructuring and what it allows you to do is to destructure a complex structure. 108
So the complex things in JavaScript are objects and arrays. 109
Let's say that I had a constant which was a rgb color 110
right? 111
And it was an array comprised of three values. 112
If we head over to flatuicolors.com which is a really nice color palette where you can simply 113
just copy these color values, let's change the color to the rgb format, 114
so red green blue. And let's just copy this electron blue color. 115
Now if I go ahead and paste this here, you can see that this color is comprised of three elements, the 116
amount of red, the amount of green and the amount of blue. 117
Let me go ahead and add this inside my array. If I wanted to access the amount of red or green or blue, 118
I would have to log something like rgb at index 0 for the amount of red or one for the amounts of 119
green etc.. 120
And this is really bad code because it doesn't mean anything at all. 121
And if this code was separated from where the rgb array was declared and you just saw this out of the 122
blue, I mean what does that even mean 123
right? 124
What can we do instead? 125
Well we can destructure this array so that instead of having this name rgb, we can use a set of square 126
brackets. 127
Remember that we're working with an array and arrays are declared using square brackets 128
so we also deconstruct them using a square bracket. And then we can provide some names for each of the 129
elements inside the array ordered by their positions. 130
So I could call the item at index 1 red, the next one 131
green and the last one blue. 132
And what's going to happen behind the scenes 133
is this variable name red is going to be mapped to this first value, 134
green is going to remap to the second value 135
and blue is going to be mapped to the third value. 136
So now if I simply just log the value of blue, you can see that third value gets outputed. 137
So given that we know that this useState function outputs an array with a value and a function, 138
then we can give each of these a name instead of just calling it state. 139
So let's open up a set of square brackets 140
and given that we're going to be using this state to hold the value of our counter, I'm going to give 141
the first item of the array a name which is called count. 142
So now whenever I want to access the value that's stored inside the state, all I have to do instead of 143
saying state at position 0 I can simply just happen to count and it does the same thing. 144
It gets hold of the output of this function, which is an array with two items and because we've only 145
got one name specified in our destructuring, it assigns this name to the first value which is the initial 146
value. 147
So how do we use this useState hook to update its value? 148
Because yeah it's great that we can change the initial value but how can we change it later on? 149
For example when we want to call increase. What's the equivalent of the count++? 150
Well remember that we mentioned that this array that gets returned from this function has two items. 151
The first one is a value 152
and the second one is a function. Well we can give that function a name. Let's call it setCount because 153
that's basically what it's going to do. 154
This is gonna be the function that's going to be used to update this value inside our state. Inside the 155
increase function 156
I'm going to call setCount and I'm gonna pass it a new value. 157
So let's say maybe 12. 158
So now let's track what's going to happen. First when my app loads up I call you state and I give it 159
an initial value. 160
This value gets stored inside this variable count and it gets rendered inside our . 161
Now when the user presses on this button and the onClick gets triggered, the increase function is activated. 162
And this increase function is going to call set count which is going to update the state of my count 163
variable and I'm setting it to equal 12. 164
Let's go ahead and take a look in our website. When we refresh 165
it starts out with this initial value for the count. 166
And then when I press the plus button, it gets set to whatever it is that I set it to inside the increase 167
function. 168
But notice how if I keep pressing this nothing happens. It's just going to keep resetting it to 12 which 169
is not very useful for a counter app. 170
What can we do instead? 171
Well let's set this count to 0 to begin with, 172
make it more like a counter. And then I'm going to set my count to the current value of count + 1. 173
So count + 1. 174
And now when I press this button we'll see that it just increases by 1 each time. As a challenge 175
go ahead and create another button down here and instead of increasing the value, you want it to decrease 176
the value. 177
So it should have a minus sign inside 178
and when you click on it, it should go the opposite way. 179
Pause the video now and see if you can complete this challenge 180
All right. So we've got an increase function that's tied to the plus button. 181
But we should probably also have a decrease function that's tied to the minus button. 182
Now when this button gets clicked we trigger the decrease function and inside here we are again going 183
to call setCount which is the function that's going to allow us to update the value of count. 184
And we're going to say count - 1. 185
So now if we update our website and we press the plus it goes up, we press the minus 186
it goes down. And this is all achieved using the useState hook. To recap, in this lesson we're introducing 187
this concept of state in order to have interactivity in our app. 188
And what we're trying to achieve is for our website to be able to update dynamically reflecting the 189
updated state. 190
Now the state comes from this useState hook and this function comes from the React module. 191
Now when we first call this function, we get to define an initial value. And then we get to use this value 192
inside our destructed array which we called count. 193
So we're putting that value of count inside our and then we get to trigger the set count which 194
is the function that's going to update the value of count. 195
And we do that when the user clicks on our plus button. And we set it to the current value of count + 196
1, 197
so it increases it by 1 each time. 198
Now the idea of hooks might be quite unfamiliar to you but once you wrap your head around its mechanism 199
it's incredibly powerful and really useful when you want to create any sort of interactive app. 200
Now don't worry if you're still trying to get to grips with this concept because it's something that 201
is quite foreign and I recommend as a first step to simply delete all of the code that you have in your 202
code sandbox right now and then to recreate this app from scratch yourself. So delete everything that's 203
inside App.js and refresh yourself just simply on the syntax to begin with because it looks pretty 204
weird. And in the next lesson I've got a another challenge for you to implement this use 205
State hook. 206
So you're going to be getting plenty of practice 207
and we're also going to be talking about destructuring a little bit later on as well. 208
For now what I want you to do is just to get familiar with the syntax. Be able to write this code from 209
scratch yourself without looking at the video and be able to understand how we actually got here in 210
the first place. 211
So pause the video now, have a play around with the sandbox and I'll see you on the next lesson for a challenge.