1
00:00:01,050 --> 00:00:06,120
In this video we're going to write out our first example using state just as a quick disclaimer here.

2
00:00:06,120 --> 00:00:10,250
We're going to first write out a little example that's not going to be quite correct.

3
00:00:10,290 --> 00:00:14,670
I know it's really confusing any time someone shows you the wrong way to do something when you're first

4
00:00:14,670 --> 00:00:18,950
learning it but I'm doing this for a very particular reason you'll see it very shortly.

5
00:00:19,090 --> 00:00:23,410
So I'm going to first write out some slightly incorrect code and then we're going to fix it right away.

6
00:00:23,510 --> 00:00:27,310
It'll be really sure to tell you exactly what is incorrect about it.

7
00:00:27,360 --> 00:00:27,630
All right.

8
00:00:27,630 --> 00:00:32,760
So back inside of my counter screen component I'm going to first begin by adding in two button elements

9
00:00:33,360 --> 00:00:37,510
so add in a button right here and I'll give it a titled problem.

10
00:00:37,560 --> 00:00:42,180
So this first one will be increase our counter on duplicate that down.

11
00:00:42,210 --> 00:00:45,380
And the second one will be decrease.

12
00:00:45,520 --> 00:00:45,920
All right.

13
00:00:45,940 --> 00:00:51,040
Next up I'm going to declare a new variable at the top of our function going to say let.

14
00:00:51,040 --> 00:00:53,890
Counter and I'll give it a starting value of zero.

15
00:00:53,920 --> 00:00:54,850
Like so.

16
00:00:54,890 --> 00:00:57,400
So this right here this is the first line I'm going to write.

17
00:00:57,400 --> 00:01:00,670
This is not quite correct to initialize a piece of state.

18
00:01:01,030 --> 00:01:07,120
So we're gonna come back I'll say to do X this again I want to show you this example with some slightly

19
00:01:07,120 --> 00:01:10,160
incorrect code for a very particular reason.

20
00:01:10,180 --> 00:01:15,060
Now we had said that anytime a user taps on this button or this button we want to modify the value of

21
00:01:15,060 --> 00:01:15,670
counter.

22
00:01:15,690 --> 00:01:18,860
So we want to increase it by 1 or decrease it by 1.

23
00:01:19,140 --> 00:01:25,460
To do so we will add up in on press Prop 2 Our increase component.

24
00:01:25,640 --> 00:01:30,170
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

25
00:01:30,170 --> 00:01:31,150
braces.

26
00:01:31,340 --> 00:01:37,610
And then inside of here I'll put a new line and say counter plus plus remember what counter does counter

27
00:01:37,820 --> 00:01:45,770
version me plus plus does that increments a variable by 1 and I'll repeat the same thing or decrease

28
00:01:45,800 --> 00:01:46,510
as well.

29
00:01:46,550 --> 00:01:52,260
So I'll write in an era function with the body and I'll put in counter minus minus.

30
00:01:52,410 --> 00:01:57,960
And then finally inside this text element right here I'm gonna add encounter or current count and then

31
00:01:57,960 --> 00:02:02,190
I'll print out the current value of counter inside their okay.

32
00:02:02,220 --> 00:02:06,930
So let's say this right here once again this is not going to work as expected but I want to you to see

33
00:02:06,930 --> 00:02:08,340
exactly what happens.

34
00:02:08,420 --> 00:02:09,620
It's going to flip back over.

35
00:02:09,680 --> 00:02:14,280
I'm gonna go to the counter demo and then I'll click on increase and decrease in of course nothing actually

36
00:02:14,280 --> 00:02:14,900
happens here.

37
00:02:14,910 --> 00:02:16,350
So why is that.

38
00:02:16,350 --> 00:02:20,760
Well essentially inside of a react component we can reference variables like this all day.

39
00:02:20,760 --> 00:02:24,060
And behind scenes the value of counter really is changing.

40
00:02:24,270 --> 00:02:29,010
For example inside of this first on press right here right after I do the counter increment i could

41
00:02:29,010 --> 00:02:36,930
do a console log of counter and I can do another one on the second on press as well console log counter

42
00:02:36,930 --> 00:02:37,740
down here as well.

43
00:02:38,650 --> 00:02:41,460
It's going to save this and I'll retry this really quickly.

44
00:02:41,460 --> 00:02:45,510
So I'll hit increase a couple of times and then decrease a couple of times.

45
00:02:45,700 --> 00:02:51,680
I'll then go back over to my terminal and I can very easily see that we have had some console logs here

46
00:02:51,920 --> 00:02:57,890
and every time the counter variable has either increased or decreased depending on which button I hit.

47
00:02:57,890 --> 00:03:00,740
So why didn't the screen actually update.

48
00:03:00,740 --> 00:03:06,710
Well it's a very simple reason by default react does not just kind of magically watch a variable and

49
00:03:06,710 --> 00:03:10,810
say hey whenever this variable changes I'm just going to magically update.

50
00:03:10,890 --> 00:03:16,640
There's no automatic detection of some variable changing inside of our components.

51
00:03:16,640 --> 00:03:22,430
So instead when we add in a piece of states as our counter is supposed to be we're going to instead

52
00:03:22,430 --> 00:03:28,220
use a little function from react this function that we're going to use to create a state variable is

53
00:03:28,220 --> 00:03:34,550
going to have this kind of magic step built in for us when we create a variable with this magic little

54
00:03:34,550 --> 00:03:39,980
function from react react is going to automatically watch the value of that variable and whenever we

55
00:03:39,980 --> 00:03:45,730
change it react is going to automatically update the content on our screen.

56
00:03:46,120 --> 00:03:48,460
So that's the end of the bad code that we've now written out.

57
00:03:48,470 --> 00:03:53,430
Let's now replace some of this bad code with good stuff that's actually going to work appropriately.

58
00:03:53,810 --> 00:03:58,520
So to get started up at the top from react I'm going to import use.

59
00:03:58,550 --> 00:04:05,420
State you state is what you referred to as a hook a hook is a function that add some new functionality

60
00:04:05,450 --> 00:04:11,020
to a function component which is what we are using right here we can use this you state function to

61
00:04:11,020 --> 00:04:16,060
make a very special kind of variable that React is going to essentially watch and in time we update

62
00:04:16,060 --> 00:04:23,210
its value it's going to automatically update our component on the screen now with the you state we're

63
00:04:23,210 --> 00:04:28,520
going to use that to initialize our piece of state here as opposed to doing a normal variable declaration

64
00:04:30,480 --> 00:04:32,680
so I'm going to delete the left counter.

65
00:04:32,990 --> 00:04:35,350
I'm also going to delete the fix this.

66
00:04:35,720 --> 00:04:40,130
And then instead I'm going to write out const I'm going to use a little bit of weird syntax here.

67
00:04:40,160 --> 00:04:47,340
I'm going to put in some square brackets and I'll say counter and then set to counter equals use state

68
00:04:47,730 --> 00:04:55,010
like so and then into you states are going to enter in as a first argument zero OK so there's a lot

69
00:04:55,010 --> 00:04:57,340
going on here on this line right here.

70
00:04:57,350 --> 00:04:59,410
Let's break down what's happening.

71
00:04:59,410 --> 00:05:03,470
First off when we call you state I passed in a z value of zero.

72
00:05:03,490 --> 00:05:08,980
We're using you state to initialize a new piece of state or new piece of data that we're going to track.

73
00:05:08,980 --> 00:05:13,930
Remember we made a big point in these diagrams we looked at over here about talking about what the data's

74
00:05:13,990 --> 00:05:17,950
starting or default value is whenever we call you state.

75
00:05:17,980 --> 00:05:23,070
We're going to pass in the starting value or the default value of that piece of data.

76
00:05:23,080 --> 00:05:29,930
So in this case I put in zero right here because I want my counter to have an initial value of zero.

77
00:05:29,930 --> 00:05:32,230
Next up on the left hand side is equal sign.

78
00:05:32,240 --> 00:05:34,220
What are those square brackets right there.

79
00:05:34,220 --> 00:05:37,400
Well this is what I referred to as Array D structuring.

80
00:05:37,400 --> 00:05:41,870
This is another way of pulling some elements or a reference to elements out of an array.

81
00:05:42,650 --> 00:05:46,670
Let's flip back over to our browser really quick and I'll write out a quick example to show you exactly

82
00:05:46,670 --> 00:05:49,550
what's going on with that OK.

83
00:05:49,600 --> 00:05:54,360
So I can use my browser or the console inside of it just to give you a very quick example here.

84
00:05:54,580 --> 00:06:01,180
I'm going to declare declare a new array called Colors and I'll give it a value of red and green like

85
00:06:01,180 --> 00:06:07,870
so I can now access different elements inside that array by writing out simply colors at 0 or colors

86
00:06:07,870 --> 00:06:08,610
at 1.

87
00:06:08,770 --> 00:06:13,210
But another way that I could do this if I wanted to take both the first and second elements out there

88
00:06:13,450 --> 00:06:23,160
and assign them to a variable all in one step I could write out const color 1 and color 2 equals colors.

89
00:06:23,200 --> 00:06:27,930
So this is essentially saying hey javascript we understand that colors is in array.

90
00:06:28,120 --> 00:06:33,340
So we want you to take the first element out of colors and assign it to the variable color one and then

91
00:06:33,340 --> 00:06:38,850
the second element out of colors and assign it to the variable color to the variable names right.

92
00:06:38,850 --> 00:06:40,180
You're off color 1 in color 2.

93
00:06:40,180 --> 00:06:42,520
They can be anything we want.

94
00:06:42,580 --> 00:06:43,450
So I'll run that.

95
00:06:43,460 --> 00:06:51,780
Now if I print out color one I'll see red and color two is green so the syntax you see back over here

96
00:06:51,870 --> 00:06:58,050
this array de structuring we're only using because it just gives us a slightly easier time of accessing

97
00:06:58,290 --> 00:07:02,390
whatever you state returns to us OK.

98
00:07:02,430 --> 00:07:05,160
So now inside of here we've got a counter variable.

99
00:07:05,220 --> 00:07:08,680
This is our piece of state that's going to change over time.

100
00:07:08,690 --> 00:07:11,830
Now here's the one catch the one thing you need to be aware of.

101
00:07:12,320 --> 00:07:17,730
Anytime we want to update or change this piece of state we're never going to modify the counter variable

102
00:07:17,730 --> 00:07:24,040
directly this counter plus plus right here we'll modify the counter variable directly and we don't want

103
00:07:24,040 --> 00:07:24,880
to do that.

104
00:07:25,030 --> 00:07:31,360
As I mentioned reactor's not magic it's not going to somehow detect magically that we change that variable.

105
00:07:31,360 --> 00:07:35,280
So this is bad right here and I'll put in a comment that says Don't do this.

106
00:07:35,440 --> 00:07:38,390
We don't modify a state variable directly.

107
00:07:38,660 --> 00:07:43,510
Instead anytime we want to change a state variable we're going to use the second thing that comes back

108
00:07:43,510 --> 00:07:46,130
to us when we call you state.

109
00:07:46,160 --> 00:07:48,930
This is a function called set counter.

110
00:07:49,120 --> 00:07:53,840
Anytime we want to update our piece of state we're going to call that function right there with the

111
00:07:53,840 --> 00:07:59,590
new value that we want counter to be so in other words inside of our first button right here.

112
00:07:59,610 --> 00:08:04,450
Anytime we click or tap on that button I'm going to remove the console log inside of here.

113
00:08:04,450 --> 00:08:10,060
We probably want to increase the value of counter so to do so we can use the set counter function.

114
00:08:10,090 --> 00:08:17,680
So I will call set counter and I'll say counter plus 1 Now notice when I call counter plus one right

115
00:08:17,680 --> 00:08:23,740
here that doesn't modify counter in other words adding one to a number doesn't change that variable.

116
00:08:23,740 --> 00:08:25,440
We're just using its current value.

117
00:08:25,480 --> 00:08:31,750
We're adding one to it and that returns a new value that does not get assigned back to counter I can

118
00:08:31,750 --> 00:08:34,500
now do the same thing down here in the second button as well.

119
00:08:34,570 --> 00:08:41,470
So I got to delete everything inside of on press and replace it with set counter counter minus one

120
00:08:44,470 --> 00:08:46,940
anytime we call these set counter function.

121
00:08:46,940 --> 00:08:52,210
React is going to automatically rerun this entire function component we have created.

122
00:08:52,210 --> 00:08:57,750
So the entire counter screen component like everything inside of here is going to be executed again.

123
00:08:57,850 --> 00:09:03,160
But the second time it gets executed a value of counter right here will now be whatever we passed into

124
00:09:03,220 --> 00:09:04,600
set counter.

125
00:09:04,600 --> 00:09:08,400
So in this case counter plus one or counter minus one.

126
00:09:08,410 --> 00:09:08,620
OK.

127
00:09:08,650 --> 00:09:09,900
So I'm doing a lot of talking here.

128
00:09:09,910 --> 00:09:12,060
Let's just see this and see what happens.

129
00:09:12,160 --> 00:09:17,350
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

130
00:09:17,350 --> 00:09:23,870
current count increase by 1 and decrease will make it decrease by 1 now learning state for the very

131
00:09:23,870 --> 00:09:26,150
first time is usually pretty darn confusing.

132
00:09:26,150 --> 00:09:30,680
So at this point everything inside of here if this looks kind of confusing don't sweat it because as

133
00:09:30,680 --> 00:09:35,270
I mentioned we're going to go over several examples exactly like this to help you understand exactly

134
00:09:35,270 --> 00:09:36,590
what's going on.

135
00:09:36,590 --> 00:09:40,820
Let's take a quick pause right here in the next video what we will do a quick review of the code we

136
00:09:40,820 --> 00:09:44,780
just wrote and we will start on a second little example with state.