1
00:00:02,000 --> 00:00:03,000
So how can we fetch posts

2
00:00:03,000 --> 00:00:06,000
when we first visit or reload this page?

3
00:00:08,000 --> 00:00:09,000
Well, for that, you could, of course,

4
00:00:09,000 --> 00:00:12,000
say that you go to PostsList

5
00:00:12,000 --> 00:00:15,000
because that's where we need the posts.

6
00:00:15,000 --> 00:00:18,000
And we also send a fetch request here.

7
00:00:18,000 --> 00:00:22,000
We target the same URL as before

8
00:00:22,000 --> 00:00:24,000
because if we take a look at the backend,

9
00:00:24,000 --> 00:00:25,000
we see that in the end,

10
00:00:25,000 --> 00:00:29,000
a get request to /posts gives us all our posts.

11
00:00:31,000 --> 00:00:34,000
And then here, we already send a get request

12
00:00:34,000 --> 00:00:36,000
because as mentioned, that's the default

13
00:00:36,000 --> 00:00:37,000
for the fetch function

14
00:00:37,000 --> 00:00:39,000
so we don't need to configure this request.

15
00:00:39,000 --> 00:00:42,000
And now what?

16
00:00:42,000 --> 00:00:44,000
Well, now in the end, I wanna make sure

17
00:00:44,000 --> 00:00:47,000
that we update our posts here

18
00:00:47,000 --> 00:00:49,000
whenever we got a response.

19
00:00:50,000 --> 00:00:55,000
Well, for that, you could try to use async await like this

20
00:00:55,000 --> 00:00:57,000
but this is not really supported.

21
00:00:57,000 --> 00:01:01,000
Your component functions must return JSX code

22
00:01:01,000 --> 00:01:03,000
or some other values

23
00:01:03,000 --> 00:01:05,000
but promises should not be returned,

24
00:01:05,000 --> 00:01:07,000
at least for this standard component here

25
00:01:07,000 --> 00:01:11,000
without using any extra framework on top of React

26
00:01:11,000 --> 00:01:12,000
or anything like that.

27
00:01:12,000 --> 00:01:14,000
So promises may not be returned

28
00:01:14,000 --> 00:01:17,000
and since adding async in front of a function

29
00:01:17,000 --> 00:01:20,000
always ensures that this function returns a promise

30
00:01:20,000 --> 00:01:24,000
because any data returned by the function gets wrapped

31
00:01:24,000 --> 00:01:26,000
into a promise, we must not use async here

32
00:01:26,000 --> 00:01:29,000
and we therefore can't use await here.

33
00:01:29,000 --> 00:01:31,000
But of course, we could use the standard old school way

34
00:01:31,000 --> 00:01:33,000
of handling the response,

35
00:01:33,000 --> 00:01:35,000
and add the then method here

36
00:01:35,000 --> 00:01:37,000
to get our response

37
00:01:37,000 --> 00:01:42,000
and then return response.json to unpack the data

38
00:01:42,000 --> 00:01:43,000
from the response

39
00:01:43,000 --> 00:01:45,000
because that's how you do it with this response.

40
00:01:45,000 --> 00:01:46,000
There is a JSON method,

41
00:01:46,000 --> 00:01:49,000
which then ultimately gives you the data

42
00:01:49,000 --> 00:01:51,000
that was sent back from the server.

43
00:01:52,000 --> 00:01:55,000
And that data that's sent back is an object

44
00:01:55,000 --> 00:01:58,000
with a posts key that holds all the fetched posts.

45
00:02:00,000 --> 00:02:03,000
So we could add another then block here

46
00:02:03,000 --> 00:02:06,000
and then access data.posts,

47
00:02:06,000 --> 00:02:08,000
and there to be precise,

48
00:02:08,000 --> 00:02:11,000
we might want to call setPosts

49
00:02:11,000 --> 00:02:13,000
and set our posts to data.posts.

50
00:02:13,000 --> 00:02:15,000
But we should not do that.

51
00:02:15,000 --> 00:02:18,000
You should not save that, you should not write this code

52
00:02:19,000 --> 00:02:21,000
because if you would write this code,

53
00:02:21,000 --> 00:02:25,000
it theoretically would update the state

54
00:02:25,000 --> 00:02:30,000
with the new posts but it would cause an infinite loop,

55
00:02:30,000 --> 00:02:32,000
and why would it do that?

56
00:02:33,000 --> 00:02:37,000
Well, simply because whenever you update your state,

57
00:02:37,000 --> 00:02:39,000
as you learned, your component function

58
00:02:39,000 --> 00:02:42,000
gets executed again by React.

59
00:02:42,000 --> 00:02:44,000
That's one of the key ideas of React

60
00:02:44,000 --> 00:02:47,000
that updating the state causes the component function

61
00:02:47,000 --> 00:02:48,000
to be executed again,

62
00:02:48,000 --> 00:02:52,000
so that React can update the UI if needed.

63
00:02:52,000 --> 00:02:55,000
However, if this component function executes again,

64
00:02:55,000 --> 00:02:58,000
this fetch request also gets sent again.

65
00:02:58,000 --> 00:03:01,000
So we sent another request, we get data,

66
00:03:01,000 --> 00:03:04,000
we update the state and the loop begins again.

67
00:03:04,000 --> 00:03:07,000
So this is not code we wanna write like that.

68
00:03:07,000 --> 00:03:09,000
It would cause an infinite loop.

69
00:03:11,000 --> 00:03:13,000
So therefore, since that's not the solution

70
00:03:13,000 --> 00:03:16,000
for fetching the posts, how should we do it?

71
00:03:16,000 --> 00:03:18,000
Well, this is, of course, a common problem

72
00:03:18,000 --> 00:03:20,000
and therefore, React has a solution.

73
00:03:20,000 --> 00:03:22,000
It has another hook we can use.

74
00:03:24,000 --> 00:03:27,000
Now, the hook we can use to solve problems like this

75
00:03:27,000 --> 00:03:31,000
where we effectively wanna cause a side effect

76
00:03:31,000 --> 00:03:32,000
in our component function,

77
00:03:32,000 --> 00:03:35,000
so where we wanna trigger some action

78
00:03:35,000 --> 00:03:38,000
that does not directly influence the JSX code

79
00:03:38,000 --> 00:03:41,000
but maybe indirectly in the future

80
00:03:41,000 --> 00:03:42,000
or that does anything else

81
00:03:42,000 --> 00:03:45,000
that's not related to rendering the UI.

82
00:03:45,000 --> 00:03:47,000
In such cases, we get another hook we can use

83
00:03:47,000 --> 00:03:49,000
and that would be the useEffect hook,

84
00:03:50,000 --> 00:03:53,000
which is there to wrap side effects.

85
00:03:54,000 --> 00:03:57,000
useEffect allows you to safely run code like this

86
00:03:57,000 --> 00:04:00,000
without causing an infinite loop

87
00:04:00,000 --> 00:04:01,000
but how does it work?

88
00:04:01,000 --> 00:04:04,000
Well, you execute useEffect like this.

89
00:04:04,000 --> 00:04:08,000
And unlike useState, it does then not return a value.

90
00:04:08,000 --> 00:04:10,000
Instead, it takes a function as a value

91
00:04:10,000 --> 00:04:13,000
and as a second argument, an array.

92
00:04:14,000 --> 00:04:17,000
So two arguments that must be passed to useEffect:

93
00:04:17,000 --> 00:04:19,000
a function and an array.

94
00:04:20,000 --> 00:04:22,000
Now, I'll come back to the array in the future.

95
00:04:22,000 --> 00:04:24,000
Let's first focus on the function.

96
00:04:25,000 --> 00:04:29,000
This function will be executed by React

97
00:04:29,000 --> 00:04:33,000
for you whenever it considers this effect

98
00:04:33,000 --> 00:04:35,000
to require execution,

99
00:04:35,000 --> 00:04:38,000
and I'll get back to when it considers this effect

100
00:04:38,000 --> 00:04:42,000
to require execution in just a couple of seconds

101
00:04:42,000 --> 00:04:44,000
but I can tell you that this second argument,

102
00:04:44,000 --> 00:04:47,000
this array has something to do with it.

103
00:04:48,000 --> 00:04:50,000
We can, however, now grab our code

104
00:04:50,000 --> 00:04:51,000
and put it in there

105
00:04:51,000 --> 00:04:54,000
and we could now also actually wrap it

106
00:04:54,000 --> 00:04:57,000
into an extra function.

107
00:04:57,000 --> 00:04:59,000
fetchPosts could be the name,

108
00:04:59,000 --> 00:05:00,000
which is an async function,

109
00:05:00,000 --> 00:05:02,000
which is defined inside of the effect function

110
00:05:03,000 --> 00:05:05,000
so that we can move our code in there

111
00:05:05,000 --> 00:05:09,000
and actually use await to get our response.

112
00:05:10,000 --> 00:05:14,000
And then also get our responseData

113
00:05:14,000 --> 00:05:16,000
by awaiting response.json

114
00:05:16,000 --> 00:05:18,000
so that we have this more readable code.

115
00:05:18,000 --> 00:05:20,000
And then we update our posts

116
00:05:20,000 --> 00:05:22,000
with the resData.posts.

117
00:05:24,000 --> 00:05:27,000
I created this extra function in this effect function,

118
00:05:27,000 --> 00:05:30,000
instead of turning the effect function itself

119
00:05:30,000 --> 00:05:31,000
into an async function

120
00:05:31,000 --> 00:05:34,000
because useEffect takes a function

121
00:05:34,000 --> 00:05:36,000
that should not return a promise itself

122
00:05:36,000 --> 00:05:38,000
but that instead should return nothing

123
00:05:38,000 --> 00:05:40,000
or a cleanup function,

124
00:05:40,000 --> 00:05:42,000
which is not too important for us here,

125
00:05:42,000 --> 00:05:45,000
which I do, of course, cover in my Complete Guide course,

126
00:05:45,000 --> 00:05:47,000
but which we can ignore here.

127
00:05:47,000 --> 00:05:49,000
But we should not return a promise here

128
00:05:49,000 --> 00:05:50,000
for this effect function

129
00:05:50,000 --> 00:05:53,000
and therefore, we should not add async here.

130
00:05:53,000 --> 00:05:55,000
Instead, I create an inner nested function,

131
00:05:55,000 --> 00:05:58,000
which I then simply immediately execute

132
00:05:58,000 --> 00:06:00,000
inside of this effect function.

133
00:06:01,000 --> 00:06:04,000
And this trick allows me to use async await in here.

134
00:06:05,000 --> 00:06:07,000
But back to the effect function itself

135
00:06:07,000 --> 00:06:09,000
and the idea behind it.

136
00:06:09,000 --> 00:06:12,000
As mentioned, React will now decide

137
00:06:12,000 --> 00:06:14,000
when this function gets executed

138
00:06:14,000 --> 00:06:18,000
and therefore, when this function gets executed indirectly.

139
00:06:18,000 --> 00:06:21,000
And I can tell you that now with this setup here,

140
00:06:21,000 --> 00:06:23,000
it will not always get executed

141
00:06:23,000 --> 00:06:26,000
when this component function executes.

142
00:06:26,000 --> 00:06:28,000
Instead, if we save this code,

143
00:06:28,000 --> 00:06:30,000
and we reload the page,

144
00:06:30,000 --> 00:06:32,000
you see that now this post appears magically

145
00:06:32,000 --> 00:06:35,000
and that's, of course, the post from the backend.

146
00:06:36,000 --> 00:06:37,000
And there we can prove this.

147
00:06:37,000 --> 00:06:39,000
If I go to the backend,

148
00:06:39,000 --> 00:06:41,000
and I would edit the body here

149
00:06:41,000 --> 00:06:44,000
in posts.json, and save the updated file,

150
00:06:45,000 --> 00:06:48,000
and I then go back to this app and reload,

151
00:06:48,000 --> 00:06:51,000
you see that was uploaded here as well.

152
00:06:51,000 --> 00:06:53,000
So this data is coming from the backend

153
00:06:53,000 --> 00:06:55,000
thanks to useEffect.

154
00:06:55,000 --> 00:06:57,000
But how exactly is this function working

155
00:06:57,000 --> 00:07:00,000
and why is it now not causing an infinite loop?

156
00:07:01,000 --> 00:07:03,000
This useEffect function here, this hook

157
00:07:03,000 --> 00:07:06,000
is now preventing an infinite loop from occurring

158
00:07:06,000 --> 00:07:08,000
by simply making sure

159
00:07:08,000 --> 00:07:11,000
that this effect function does not always execute

160
00:07:11,000 --> 00:07:13,000
when the component function executes.

161
00:07:13,000 --> 00:07:15,000
It executes sometimes

162
00:07:15,000 --> 00:07:17,000
when the component function executes.

163
00:07:17,000 --> 00:07:20,000
Otherwise we wouldn't have fetched the posts

164
00:07:20,000 --> 00:07:21,000
but not always.

165
00:07:21,000 --> 00:07:23,000
But when does it execute?

166
00:07:23,000 --> 00:07:26,000
Well, that's controlled with this second argument

167
00:07:26,000 --> 00:07:29,000
that's passed to useEffect, this array here.

168
00:07:30,000 --> 00:07:34,000
This array in the end specifies the dependencies

169
00:07:34,000 --> 00:07:36,000
of your effect function.

170
00:07:36,000 --> 00:07:39,000
And a dependency is simply any variable

171
00:07:39,000 --> 00:07:42,000
or function that might be defined outside

172
00:07:42,000 --> 00:07:44,000
of this effect function

173
00:07:44,000 --> 00:07:47,000
anywhere in your React components, in this component

174
00:07:47,000 --> 00:07:50,000
or some parent component passed down through props.

175
00:07:51,000 --> 00:07:55,000
And whenever such a variable or function defined outside

176
00:07:55,000 --> 00:07:57,000
of the effect function changes,

177
00:07:57,000 --> 00:07:59,000
receives a new value, for example,

178
00:07:59,000 --> 00:08:02,000
this effect function will be executed again.

179
00:08:03,000 --> 00:08:04,000
Now, if we have an empty array,

180
00:08:04,000 --> 00:08:08,000
it simply means this function has no dependencies

181
00:08:08,000 --> 00:08:11,000
and therefore, it will never be executed again.

182
00:08:11,000 --> 00:08:13,000
Instead, React will only execute it once

183
00:08:13,000 --> 00:08:16,000
and that's when this component is first rendered.

184
00:08:16,000 --> 00:08:18,000
And technically, it gets executed

185
00:08:18,000 --> 00:08:20,000
after the component first rendered,

186
00:08:20,000 --> 00:08:23,000
so theoretically, the component first renders

187
00:08:23,000 --> 00:08:24,000
without any posts

188
00:08:24,000 --> 00:08:27,000
and then it immediately executes this effect function

189
00:08:27,000 --> 00:08:29,000
where the posts get updated.

190
00:08:30,000 --> 00:08:31,000
But that's all so fast

191
00:08:31,000 --> 00:08:34,000
that we only see the final state here

192
00:08:34,000 --> 00:08:36,000
where the posts are fetched.

193
00:08:37,000 --> 00:08:39,000
But that's how this executes.

194
00:08:39,000 --> 00:08:41,000
And this now gives us fine-grained control

195
00:08:41,000 --> 00:08:44,000
over when this executes.

196
00:08:44,000 --> 00:08:46,000
So that's how we can handle side effects,

197
00:08:46,000 --> 00:08:48,000
like sending HTTP requests.

198
00:08:48,000 --> 00:08:49,000
Again, we, of course, dive deeper

199
00:08:49,000 --> 00:08:52,000
into effects and all these things

200
00:08:52,000 --> 00:08:53,000
in my Complete Guide course

201
00:08:53,000 --> 00:08:55,000
because that's the idea behind that course,

202
00:08:55,000 --> 00:08:57,000
but that's in a nutshell what you must know

203
00:08:57,000 --> 00:09:01,000
about useEffect and how it can help you, for example,

204
00:09:01,000 --> 00:09:04,000
for fetching data when a component is first rendered.