1
00:00:02,000 --> 00:00:03,000
So now we know

2
00:00:03,000 --> 00:00:05,000
how we can set up event listeners.

3
00:00:05,000 --> 00:00:08,000
Let's now dive into this state concept.

4
00:00:08,000 --> 00:00:12,000
And to get started, I simply wanna output the text

5
00:00:12,000 --> 00:00:14,000
that's input into this textarea

6
00:00:14,000 --> 00:00:17,000
in a new paragraph below this input in the end.

7
00:00:18,000 --> 00:00:19,000
We'll soon also make sure

8
00:00:19,000 --> 00:00:21,000
that it ends up in the post component,

9
00:00:21,000 --> 00:00:24,000
but for the moment let's just output it there.

10
00:00:25,000 --> 00:00:29,000
To achieve this, we need to store the value somewhere

11
00:00:29,000 --> 00:00:32,000
and then reference that somewhere down there.

12
00:00:32,000 --> 00:00:35,000
And the first thing you might think about

13
00:00:35,000 --> 00:00:38,000
could be a variable.

14
00:00:38,000 --> 00:00:40,000
We could add a variable enteredBody

15
00:00:40,000 --> 00:00:43,000
which maybe is an empty string initially.

16
00:00:44,000 --> 00:00:47,000
And then here instead of console logging the entered value,

17
00:00:47,000 --> 00:00:52,000
we could store it as a value in enteredBody like this.

18
00:00:52,000 --> 00:00:54,000
So we update the variable

19
00:00:54,000 --> 00:00:56,000
whenever this function is executed,

20
00:00:56,000 --> 00:00:59,000
which happens on every keystroke as we saw.

21
00:01:00,000 --> 00:01:02,000
And then we could use this enteredBody variable

22
00:01:02,000 --> 00:01:05,000
down there in this paragraph.

23
00:01:05,000 --> 00:01:08,000
So here we can use our single curly braces

24
00:01:08,000 --> 00:01:10,000
and output enteredBody.

25
00:01:11,000 --> 00:01:15,000
So this variable is updated here

26
00:01:15,000 --> 00:01:19,000
and is then output down there.

27
00:01:19,000 --> 00:01:20,000
Should work, right?

28
00:01:21,000 --> 00:01:23,000
Well, if you save that

29
00:01:24,000 --> 00:01:28,000
and you type something here, nothing happens.

30
00:01:28,000 --> 00:01:30,000
It should be output down there

31
00:01:30,000 --> 00:01:33,000
because that's where I added the paragraph.

32
00:01:33,000 --> 00:01:36,000
And indeed, if you inspect this here,

33
00:01:36,000 --> 00:01:39,000
you will see that below this textarea here

34
00:01:39,000 --> 00:01:41,000
is an empty paragraph

35
00:01:41,000 --> 00:01:43,000
but it is indeed that, empty.

36
00:01:44,000 --> 00:01:48,000
What I type here is not being output in that paragraph.

37
00:01:48,000 --> 00:01:49,000
Now why is that the case?

38
00:01:51,000 --> 00:01:52,000
Well because there is something

39
00:01:52,000 --> 00:01:55,000
very important to understand.

40
00:01:55,000 --> 00:01:59,000
React executes your component functions like NewPost

41
00:01:59,000 --> 00:02:03,000
and it then takes the JSX code returned by those functions.

42
00:02:03,000 --> 00:02:06,000
So the current snapshot of the HTML content

43
00:02:06,000 --> 00:02:08,000
that should be output on the screen

44
00:02:08,000 --> 00:02:11,000
and it does render it to the screen.

45
00:02:12,000 --> 00:02:15,000
But if thereafter in your component function

46
00:02:15,000 --> 00:02:18,000
you change some variable value

47
00:02:18,000 --> 00:02:20,000
that's being used in your JSX code,

48
00:02:20,000 --> 00:02:23,000
that won't be picked up by React

49
00:02:23,000 --> 00:02:28,000
because this JSX code is only taken once as a snapshot

50
00:02:28,000 --> 00:02:31,000
when this component function is executed for the first time.

51
00:02:32,000 --> 00:02:34,000
Indeed, if that component function

52
00:02:34,000 --> 00:02:37,000
would be executed by a React again,

53
00:02:37,000 --> 00:02:41,000
it would also consider any updates to that snapshot

54
00:02:41,000 --> 00:02:44,000
and update the rendered user interface.

55
00:02:44,000 --> 00:02:46,000
But React does by default

56
00:02:46,000 --> 00:02:50,000
not randomly execute NewPost again.

57
00:02:50,000 --> 00:02:53,000
And it does not execute NewPost

58
00:02:53,000 --> 00:02:55,000
or any other component function again

59
00:02:55,000 --> 00:02:57,000
just because you changed some variable

60
00:02:57,000 --> 00:03:00,000
or just because you have some event listener in there.

61
00:03:00,000 --> 00:03:03,000
This is ignored by React.

62
00:03:03,000 --> 00:03:05,000
Of course it adds the event listener

63
00:03:05,000 --> 00:03:08,000
and this function executes, but it does not care

64
00:03:08,000 --> 00:03:12,000
about whether this would theoretically change your JSX code.

65
00:03:13,000 --> 00:03:18,000
Instead, you have to basically create this variable

66
00:03:18,000 --> 00:03:21,000
in a special way using a special React feature

67
00:03:21,000 --> 00:03:23,000
to let React know about any changes

68
00:03:23,000 --> 00:03:26,000
that should cause a UI update.

69
00:03:27,000 --> 00:03:31,000
And for that you have to import something from React.

70
00:03:31,000 --> 00:03:35,000
So from the React library, not from React DOM,

71
00:03:35,000 --> 00:03:36,000
but from just React.

72
00:03:37,000 --> 00:03:42,000
And that something is a function called useState.

73
00:03:43,000 --> 00:03:46,000
Now this is a so called React Hook.

74
00:03:46,000 --> 00:03:48,000
React has multiple built-in functions

75
00:03:48,000 --> 00:03:50,000
that all start with use,

76
00:03:50,000 --> 00:03:53,000
as you can see here with my auto completion.

77
00:03:53,000 --> 00:03:54,000
And these functions,

78
00:03:54,000 --> 00:03:59,000
whilst technically being standard JavaScript functions

79
00:03:59,000 --> 00:04:00,000
are called React Hooks.

80
00:04:01,000 --> 00:04:04,000
So functions in React that start with use

81
00:04:04,000 --> 00:04:07,000
are considered React Hooks.

82
00:04:07,000 --> 00:04:10,000
The special thing about these hook functions

83
00:04:10,000 --> 00:04:15,000
is that you must execute them inside of component functions.

84
00:04:15,000 --> 00:04:19,000
You can't execute them in regular JavaScript functions.

85
00:04:19,000 --> 00:04:22,000
You can, but you'll get a warning or an error.

86
00:04:22,000 --> 00:04:23,000
But you must execute them

87
00:04:23,000 --> 00:04:26,000
in React component functions instead.

88
00:04:26,000 --> 00:04:29,000
And then those hook functions typically

89
00:04:29,000 --> 00:04:32,000
change something about that component

90
00:04:32,000 --> 00:04:36,000
or regarding how React behaves with that component.

91
00:04:38,000 --> 00:04:41,000
In case of useState when you execute that

92
00:04:41,000 --> 00:04:43,000
inside of a component function,

93
00:04:43,000 --> 00:04:47,000
you register a new state slice, as you could say.

94
00:04:47,000 --> 00:04:51,000
A new state value that belongs to this component.

95
00:04:52,000 --> 00:04:54,000
In a state value can be anything.

96
00:04:54,000 --> 00:04:58,000
It can be an object, a number, an array, a string,

97
00:04:58,000 --> 00:04:59,000
whatever you want.

98
00:04:59,000 --> 00:05:03,000
Here if you wanna store the entered text,

99
00:05:03,000 --> 00:05:07,000
we could register a string as a state slice

100
00:05:07,000 --> 00:05:08,000
for this component.

101
00:05:09,000 --> 00:05:14,000
You set a default value for that state variable

102
00:05:14,000 --> 00:05:15,000
if you want to call it like this,

103
00:05:15,000 --> 00:05:20,000
by passing your initial value as an argument to useState.

104
00:05:20,000 --> 00:05:24,000
For example an empty string just as I did it down there.

105
00:05:24,000 --> 00:05:26,000
But again, that could be anything.

106
00:05:26,000 --> 00:05:29,000
It can be undefined, it can be a number,

107
00:05:29,000 --> 00:05:31,000
it could be an object, but here it's a string.

108
00:05:33,000 --> 00:05:37,000
useState then returns something.

109
00:05:37,000 --> 00:05:40,000
It returns an array.

110
00:05:40,000 --> 00:05:42,000
And I'll store that array in a constant.

111
00:05:42,000 --> 00:05:46,000
StateData is a name we could use here.

112
00:05:47,000 --> 00:05:50,000
Now this stateData array

113
00:05:50,000 --> 00:05:54,000
has always exactly two elements,

114
00:05:54,000 --> 00:05:56,000
never more, never less.

115
00:05:57,000 --> 00:06:00,000
And the first element of stateData

116
00:06:00,000 --> 00:06:03,000
is always the current state value.

117
00:06:03,000 --> 00:06:05,000
So initially that empty string

118
00:06:05,000 --> 00:06:08,000
but that value can change as you will soon see.

119
00:06:09,000 --> 00:06:14,000
Because that second element in that stateData array

120
00:06:14,000 --> 00:06:17,000
is a state updating function.

121
00:06:17,000 --> 00:06:21,000
A function which you can execute to assign a new value

122
00:06:21,000 --> 00:06:23,000
to your state.

123
00:06:23,000 --> 00:06:25,000
Because that state value is stored

124
00:06:25,000 --> 00:06:28,000
somewhere in memory by React.

125
00:06:28,000 --> 00:06:30,000
You set an initial value

126
00:06:30,000 --> 00:06:32,000
and you can then call this function,

127
00:06:32,000 --> 00:06:35,000
which is returned by useState as a second element

128
00:06:35,000 --> 00:06:40,000
in this stateData array to update that value.

129
00:06:40,000 --> 00:06:42,000
Now the special thing about that is,

130
00:06:42,000 --> 00:06:46,000
that if you call that state updating function,

131
00:06:46,000 --> 00:06:50,000
you don't just store a new value somewhere in memory

132
00:06:50,000 --> 00:06:55,000
but React will also reexecute that function

133
00:06:55,000 --> 00:06:57,000
in which this state was registered.

134
00:06:57,000 --> 00:07:02,000
So it will call this component function again,

135
00:07:02,000 --> 00:07:05,000
just as it did initially when it rendered that component

136
00:07:05,000 --> 00:07:07,000
for the first time.

137
00:07:07,000 --> 00:07:11,000
And since it calls that component function again,

138
00:07:11,000 --> 00:07:13,000
you get the current state value.

139
00:07:13,000 --> 00:07:15,000
So the value which you just set

140
00:07:15,000 --> 00:07:17,000
with help of that state updating function

141
00:07:17,000 --> 00:07:19,000
as the first element here.

142
00:07:19,000 --> 00:07:22,000
And you get the latest JSX snapshot.

143
00:07:22,000 --> 00:07:24,000
And if that deviates

144
00:07:24,000 --> 00:07:28,000
from the previously rendered JSX snapshot,

145
00:07:28,000 --> 00:07:33,000
React will update the parts in the UI that need updating.

146
00:07:33,000 --> 00:07:35,000
And that's, by the way, all important.

147
00:07:35,000 --> 00:07:38,000
React will basically make a comparison

148
00:07:38,000 --> 00:07:41,000
between the different snapshots behind the scenes

149
00:07:41,000 --> 00:07:45,000
and only update the parts in the UI that must be updated

150
00:07:45,000 --> 00:07:49,000
so that you don't unnecessarily update the DOM,

151
00:07:49,000 --> 00:07:51,000
which is quite performance intensive.

152
00:07:53,000 --> 00:07:55,000
So that's what you get back here.

153
00:07:55,000 --> 00:07:58,000
Now it's quite common to use array destructuring here,

154
00:07:58,000 --> 00:08:02,000
which is a default modern JavaScript feature

155
00:08:02,000 --> 00:08:05,000
to store the current value in a constant

156
00:08:05,000 --> 00:08:09,000
and the updating function.

157
00:08:09,000 --> 00:08:11,000
And typically you should pick names here

158
00:08:11,000 --> 00:08:13,000
that describe your state,

159
00:08:13,000 --> 00:08:15,000
like for example, the enteredBody.

160
00:08:15,000 --> 00:08:17,000
And then the updating function

161
00:08:17,000 --> 00:08:19,000
could be called setEnteredbody.

162
00:08:19,000 --> 00:08:21,000
It's kind of a convention to name

163
00:08:21,000 --> 00:08:24,000
this state updating function set,

164
00:08:24,000 --> 00:08:26,000
and then you basically repeat your state name,

165
00:08:26,000 --> 00:08:29,000
just format it as camel case.

166
00:08:30,000 --> 00:08:32,000
Now I'll remove that variable here

167
00:08:32,000 --> 00:08:35,000
because we have a name clash otherwise.

168
00:08:35,000 --> 00:08:38,000
And with that we registered this state.

169
00:08:39,000 --> 00:08:41,000
Now to update that state

170
00:08:41,000 --> 00:08:44,000
you don't try to assign a new value.

171
00:08:44,000 --> 00:08:48,000
That's why I also use the const here for these two values.

172
00:08:48,000 --> 00:08:50,000
Because instead you have to call

173
00:08:50,000 --> 00:08:54,000
this state updating function, setEnteredBody,

174
00:08:54,000 --> 00:08:57,000
like this and pass your new value

175
00:08:57,000 --> 00:09:01,000
as a value for this argument to setEnteredBody.

176
00:09:02,000 --> 00:09:05,000
Then behind the scenes, the new state value is stored

177
00:09:05,000 --> 00:09:07,000
and this component function is executed again

178
00:09:07,000 --> 00:09:11,000
and enteredBody will then hold that new value.

179
00:09:11,000 --> 00:09:13,000
That's why it may be a constant

180
00:09:13,000 --> 00:09:15,000
because it's always a brand new constant

181
00:09:15,000 --> 00:09:18,000
because it's always a brand new function execution

182
00:09:18,000 --> 00:09:20,000
in the end when you update the state.

183
00:09:21,000 --> 00:09:24,000
So now we can use this enteredBody state here

184
00:09:24,000 --> 00:09:29,000
in this paragraph to output the new state value.

185
00:09:29,000 --> 00:09:32,000
But this time because we're using this state feature

186
00:09:32,000 --> 00:09:36,000
provided by React with help of the useState hook,

187
00:09:36,000 --> 00:09:38,000
this will all work.

188
00:09:38,000 --> 00:09:40,000
And if I now save everything again,

189
00:09:40,000 --> 00:09:43,000
you will see that as I type something here,

190
00:09:43,000 --> 00:09:47,000
it updates down there below the text input.

191
00:09:47,000 --> 00:09:49,000
So this works now.

192
00:09:49,000 --> 00:09:54,000
And with every keystroke this gets updated as you can see.

193
00:09:54,000 --> 00:09:58,000
Now that's Reacts state feature in action.