Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,120 --> 00:00:04,990
So attached you'll find this project here.
2
00:00:04,990 --> 00:00:07,280
You can simply download it, extract it,
3
00:00:07,280 --> 00:00:09,360
run npm install inside of it
4
00:00:09,360 --> 00:00:11,490
and then npm start and you will see
5
00:00:11,490 --> 00:00:14,153
this page on localhost free thousand.
6
00:00:15,310 --> 00:00:17,470
Now that's a very simple dummy app where
7
00:00:17,470 --> 00:00:20,380
you can enter any credentials of your choice.
8
00:00:20,380 --> 00:00:23,240
That's not a real authentication screen yet for the moment.
9
00:00:23,240 --> 00:00:25,253
It's just a dummy screen.
10
00:00:25,253 --> 00:00:27,950
As long as you have a valid email address
11
00:00:27,950 --> 00:00:31,970
and a password that is at least seven characters long
12
00:00:31,970 --> 00:00:33,760
you can click the login button
13
00:00:33,760 --> 00:00:36,410
and you're on this dummy welcome screen.
14
00:00:36,410 --> 00:00:38,650
These links won't do anything
15
00:00:38,650 --> 00:00:41,780
but the log out button will take you back.
16
00:00:41,780 --> 00:00:43,570
So it's a very simple dummy app.
17
00:00:43,570 --> 00:00:44,460
At the moment,
18
00:00:44,460 --> 00:00:47,020
there is no real authentication logic.
19
00:00:47,020 --> 00:00:49,970
We'll dive into that in a separate module.
20
00:00:49,970 --> 00:00:53,320
But it is a good enough example to practice the use
21
00:00:53,320 --> 00:00:55,900
of fact hook and side effects they offer
22
00:00:55,900 --> 00:00:59,023
and also the Abra code concepts of this module.
23
00:00:59,980 --> 00:01:02,860
So what's up with this use of fact hook now.
24
00:01:02,860 --> 00:01:05,060
Well, what could be a good side effect here?
25
00:01:05,060 --> 00:01:05,893
Sure.
26
00:01:05,893 --> 00:01:09,340
We could send a HTTP request to a backend server
27
00:01:09,340 --> 00:01:12,020
which validates our email and password
28
00:01:12,020 --> 00:01:14,040
but at the moment we have no such server.
29
00:01:14,040 --> 00:01:16,510
So therefore I wanna do something else.
30
00:01:16,510 --> 00:01:20,540
At the moment when I log in with any dummy credentials,
31
00:01:20,540 --> 00:01:23,490
which are an email and at least seven characters long
32
00:01:23,490 --> 00:01:24,880
for the password.
33
00:01:24,880 --> 00:01:29,211
If I click login, I am logged in in this dummy mode
34
00:01:29,211 --> 00:01:32,170
but if you reload this page here
35
00:01:32,170 --> 00:01:35,233
you'll always lose this login status.
36
00:01:36,430 --> 00:01:40,030
And that is probably not something you want.
37
00:01:40,030 --> 00:01:43,160
Now in reality you would of course, once you login,
38
00:01:43,160 --> 00:01:44,820
send the request to the backend
39
00:01:44,820 --> 00:01:48,400
and get back some log-in data for example,
40
00:01:48,400 --> 00:01:52,460
some token which identifies this user as authenticated.
41
00:01:52,460 --> 00:01:55,770
Again more on that in the authentication module.
42
00:01:55,770 --> 00:01:58,340
But you wanna make sure that does this user
43
00:01:58,340 --> 00:02:01,150
is authenticated status is also still there
44
00:02:01,150 --> 00:02:02,783
once you reload the page.
45
00:02:03,740 --> 00:02:07,050
At the moment we lose this because in the app.js file
46
00:02:07,050 --> 00:02:10,570
where I manage this simple isLoggedIn state,
47
00:02:10,570 --> 00:02:14,320
it's just managed as some react state.
48
00:02:14,320 --> 00:02:16,400
And therefore it's just in the end,
49
00:02:16,400 --> 00:02:18,040
managed in some JavaScript,
50
00:02:18,040 --> 00:02:20,890
the variable behind the scenes by react.
51
00:02:20,890 --> 00:02:23,050
Now the nature of that is that
52
00:02:23,050 --> 00:02:25,020
when you reload your application,
53
00:02:25,020 --> 00:02:27,980
your entire react script restarts
54
00:02:27,980 --> 00:02:32,110
and all variables from the last execution are lost.
55
00:02:32,110 --> 00:02:34,990
That's how the web and scripts and the browser works.
56
00:02:34,990 --> 00:02:36,813
This is nothing react specific.
57
00:02:37,800 --> 00:02:40,570
Now, since we lose all the data, when this restarts
58
00:02:40,570 --> 00:02:43,050
it would be nice to store it somewhere
59
00:02:43,050 --> 00:02:45,750
where it persists the reload.
60
00:02:45,750 --> 00:02:47,420
And even better than that,
61
00:02:47,420 --> 00:02:51,960
we also want to make sure that whenever this app does start,
62
00:02:51,960 --> 00:02:55,293
we check if the data was persisted.
63
00:02:56,320 --> 00:02:59,180
And if it is we log the user in automatically
64
00:02:59,180 --> 00:03:02,620
so that the user doesn't need to re-enter the details.
65
00:03:02,620 --> 00:03:05,520
And that's where we can use useEffect.
66
00:03:05,520 --> 00:03:08,010
Now let's start with storing the data.
67
00:03:08,010 --> 00:03:09,750
Here in the logged in handler,
68
00:03:09,750 --> 00:03:12,490
I set isLoggedIn to true.
69
00:03:12,490 --> 00:03:14,620
And that's where I wanna store that piece
70
00:03:14,620 --> 00:03:17,300
of information in the browser storage.
71
00:03:17,300 --> 00:03:20,230
Now the browser has multiple storages we can use.
72
00:03:20,230 --> 00:03:21,990
The most common storage for this
73
00:03:21,990 --> 00:03:24,400
would be cookies or local storage
74
00:03:24,400 --> 00:03:27,350
and since it's particularly easy to work with,
75
00:03:27,350 --> 00:03:30,080
we will use local storage.
76
00:03:30,080 --> 00:03:33,120
So that's a storage mechanism built into the browser
77
00:03:33,120 --> 00:03:35,340
totally independent of react.
78
00:03:35,340 --> 00:03:36,640
Here in the log in handler,
79
00:03:36,640 --> 00:03:38,920
we could therefore run local storage.
80
00:03:38,920 --> 00:03:42,550
This is a global object which is available in the browser,
81
00:03:42,550 --> 00:03:45,390
set item, and then give the item
82
00:03:45,390 --> 00:03:47,540
any identifier of our choice,
83
00:03:47,540 --> 00:03:50,830
like for example isLoggedIn
84
00:03:50,830 --> 00:03:52,730
but that's totally up to you.
85
00:03:52,730 --> 00:03:54,430
It should just be a string though.
86
00:03:55,270 --> 00:03:58,420
And the second argument should also be a string
87
00:03:58,420 --> 00:03:59,490
which you store.
88
00:03:59,490 --> 00:04:03,630
And for example that could be one to signal
89
00:04:03,630 --> 00:04:06,830
that the user isLoggedIn.
90
00:04:06,830 --> 00:04:09,263
Zero could stand for not logged in.
91
00:04:10,100 --> 00:04:12,380
Of course you could also have some identifier like this.
92
00:04:12,380 --> 00:04:13,530
This is totally up to you.
93
00:04:13,530 --> 00:04:16,230
I will work with one and zero.
94
00:04:16,230 --> 00:04:19,370
So we can set this item here.
95
00:04:19,370 --> 00:04:22,010
And if I do this and I save everything.
96
00:04:22,010 --> 00:04:24,073
If I do log in again here,
97
00:04:25,220 --> 00:04:27,640
I can open up the developer tools they're after
98
00:04:28,660 --> 00:04:33,300
and there open the application tab or the application part.
99
00:04:33,300 --> 00:04:37,520
There you'll find the storage section with the local storage
100
00:04:37,520 --> 00:04:39,700
and if you expand this you'll find your host
101
00:04:39,700 --> 00:04:43,730
and there you should now this key value pair.
102
00:04:43,730 --> 00:04:46,750
That's stemming from this line.
103
00:04:46,750 --> 00:04:49,040
So that's how we can store data.
104
00:04:49,040 --> 00:04:50,980
Now we can do this here in the function
105
00:04:50,980 --> 00:04:52,920
because it is a function that executes
106
00:04:52,920 --> 00:04:55,360
only when the user clicks the button,
107
00:04:55,360 --> 00:04:58,370
which is rare enough and which is exactly
108
00:04:58,370 --> 00:05:00,720
when we wanna store something.
109
00:05:00,720 --> 00:05:02,370
So that's now a use case
110
00:05:02,370 --> 00:05:05,063
where we don't need useEffect necessarily.
111
00:05:06,100 --> 00:05:09,860
But how about the scenario that the app restarts
112
00:05:09,860 --> 00:05:13,350
because the user left the page and comes back
113
00:05:13,350 --> 00:05:16,430
or simply because we reload the page.
114
00:05:16,430 --> 00:05:19,890
Then we wanna check if in local storage
115
00:05:19,890 --> 00:05:22,530
we have that key value pair.
116
00:05:22,530 --> 00:05:24,100
Now when the app restarts
117
00:05:24,100 --> 00:05:27,023
this app component function runs again.
118
00:05:27,950 --> 00:05:31,120
Now therefore, here of course in this function,
119
00:05:31,120 --> 00:05:33,380
we could reach out to local storage
120
00:05:33,380 --> 00:05:37,070
call get item and search for isLoggeedIn
121
00:05:37,070 --> 00:05:40,240
and this will return the items stored there.
122
00:05:40,240 --> 00:05:43,837
So that's the storedUserLoggedInInformation.
123
00:05:46,270 --> 00:05:47,870
That's a super long name obviously.
124
00:05:47,870 --> 00:05:49,870
I just wanna make it clear what's in there.
125
00:05:49,870 --> 00:05:53,190
You would typically use a shorter name, of course.
126
00:05:53,190 --> 00:05:57,021
And we could check if the storedUserLoggedInInformation
127
00:05:57,021 --> 00:05:58,720
is equal to one.
128
00:05:58,720 --> 00:06:00,320
And if it is equal to one,
129
00:06:00,320 --> 00:06:03,923
we could call setIsLoggedIn and set as to true.
130
00:06:05,030 --> 00:06:07,350
So that we set the user to LoggedIn
131
00:06:07,350 --> 00:06:10,670
even without this function being triggered.
132
00:06:10,670 --> 00:06:11,900
And it would trigger
133
00:06:11,900 --> 00:06:14,340
upon pressing the login button normally,
134
00:06:14,340 --> 00:06:17,010
just because we know that the user is logged in.
135
00:06:17,010 --> 00:06:20,683
And of course we should do that after calling useState.
136
00:06:22,270 --> 00:06:23,620
So we could do that.
137
00:06:23,620 --> 00:06:26,450
But the huge disadvantage with that approach is
138
00:06:26,450 --> 00:06:29,070
that we would create an infinite loop.
139
00:06:29,070 --> 00:06:31,380
Because we check for this being stored.
140
00:06:31,380 --> 00:06:33,760
If it is stored, we set this to true.
141
00:06:33,760 --> 00:06:36,640
And whenever we call a state setting function
142
00:06:36,640 --> 00:06:39,980
this component function re-executes
143
00:06:39,980 --> 00:06:41,810
and therefore this would run again
144
00:06:41,810 --> 00:06:45,550
would find one would set it again and so on.
145
00:06:45,550 --> 00:06:46,780
That's what I explained earlier.
146
00:06:46,780 --> 00:06:48,330
So we need to use a fact here
147
00:06:48,330 --> 00:06:51,313
because data allows us to control windows runs.
148
00:06:52,230 --> 00:06:55,200
Hence from react, besides useState
149
00:06:55,200 --> 00:06:57,573
we import useEffect like this.
150
00:06:58,520 --> 00:07:03,520
And then here we can simply call useEffect just like this.
151
00:07:03,570 --> 00:07:05,600
And now we pass those two arguments
152
00:07:05,600 --> 00:07:07,483
you saw on the slide to it.
153
00:07:08,410 --> 00:07:10,480
The first argument is a function.
154
00:07:10,480 --> 00:07:13,423
For example here and anonymous arrow function.
155
00:07:14,300 --> 00:07:16,480
Doesn't have to be an anonymous arrow function
156
00:07:16,480 --> 00:07:18,683
but often you use just such a function.
157
00:07:19,610 --> 00:07:23,220
The second argument is an array of dependencies.
158
00:07:23,220 --> 00:07:25,320
Now I'll come back to those dependencies later,
159
00:07:25,320 --> 00:07:27,770
but for the moment let's just write it like this.
160
00:07:28,920 --> 00:07:30,130
In this function,
161
00:07:30,130 --> 00:07:33,750
we can now run this code here,
162
00:07:33,750 --> 00:07:37,200
which we don't wanna run directly in the component function.
163
00:07:37,200 --> 00:07:41,470
Because now this function here is executed by react
164
00:07:41,470 --> 00:07:45,212
and it is executed after important,
165
00:07:45,212 --> 00:07:49,070
after every component re-evaluation.
166
00:07:49,070 --> 00:07:51,723
So whenever this component function ran thereafter,
167
00:07:53,803 --> 00:07:55,000
this will run.
168
00:07:55,000 --> 00:07:56,780
And if you then update the state in here
169
00:07:56,780 --> 00:07:58,383
the component will run again.
170
00:07:59,220 --> 00:08:03,200
But it will not just run after every component evaluation
171
00:08:03,200 --> 00:08:06,840
but only if the dependencies here changed.
172
00:08:06,840 --> 00:08:08,753
Now when the app starts for the first time
173
00:08:08,753 --> 00:08:10,450
that will be the case.
174
00:08:10,450 --> 00:08:13,630
If this component function runs for the very first time
175
00:08:13,630 --> 00:08:15,410
because your app just started,
176
00:08:15,410 --> 00:08:18,700
then the dependencies are considered to have changed
177
00:08:18,700 --> 00:08:22,073
because you had no dependencies before you could say.
178
00:08:23,070 --> 00:08:25,710
But once it ran for the first time for example,
179
00:08:25,710 --> 00:08:27,450
with this setup here,
180
00:08:27,450 --> 00:08:30,020
we have no dependencies but therefore of course
181
00:08:30,020 --> 00:08:32,340
they also didn't change compared
182
00:08:32,340 --> 00:08:35,100
to the first execution cycle.
183
00:08:35,100 --> 00:08:37,130
So therefore this anonymous function here
184
00:08:37,130 --> 00:08:41,370
would indeed only run once when the app starts
185
00:08:41,370 --> 00:08:44,690
because thereafter the dependencies never change
186
00:08:44,690 --> 00:08:48,400
because this year specifically has no dependencies.
187
00:08:48,400 --> 00:08:51,360
And in this scenario, that's exactly what we want.
188
00:08:51,360 --> 00:08:53,310
We want to run this code once
189
00:08:53,310 --> 00:08:55,890
and that's when our app starts up.
190
00:08:55,890 --> 00:08:57,760
So therefore here we should have exactly
191
00:08:57,760 --> 00:08:58,913
the behavior we want.
192
00:08:59,840 --> 00:09:02,600
Once the app started, this code runs.
193
00:09:02,600 --> 00:09:04,790
Here we update the state
194
00:09:04,790 --> 00:09:06,670
and as you learned this triggers
195
00:09:06,670 --> 00:09:09,083
this component function to run again.
196
00:09:10,140 --> 00:09:12,000
Now they offered this all runs again,
197
00:09:12,000 --> 00:09:14,610
this chair's is X code is evaluated and the dome
198
00:09:14,610 --> 00:09:15,860
is updated accordingly
199
00:09:15,860 --> 00:09:20,810
but thereafter defect would run again
200
00:09:20,810 --> 00:09:23,280
but only if our dependencies also changed.
201
00:09:23,280 --> 00:09:25,310
And that's not the case here as I explained.
202
00:09:25,310 --> 00:09:27,250
So therefore digit only run once.
203
00:09:27,250 --> 00:09:28,900
And hence if we saved that
204
00:09:29,780 --> 00:09:33,030
and I reload here you see I am logged in.
205
00:09:33,030 --> 00:09:35,490
I don't end up on the authentication screen
206
00:09:35,490 --> 00:09:37,750
but in the logged in state.
207
00:09:37,750 --> 00:09:40,950
And the reason for this is that we have this stored.
208
00:09:40,950 --> 00:09:43,470
Now if I clear that manually by selecting it
209
00:09:43,470 --> 00:09:44,930
and deleting it.
210
00:09:44,930 --> 00:09:47,270
If I now reload you see I'm back here.
211
00:09:47,270 --> 00:09:49,080
Because this code still ran
212
00:09:49,080 --> 00:09:52,220
but of course it didn't find a logged in information.
213
00:09:52,220 --> 00:09:55,304
If I do login again so that this is stored,
214
00:09:55,304 --> 00:09:58,310
you will see we're back to the behavior from before.
215
00:09:58,310 --> 00:10:00,543
If I reload, I end up on this page.
216
00:10:01,740 --> 00:10:03,030
So that's user fact.
217
00:10:03,030 --> 00:10:06,740
And that's one scenario where it shines a lot.
218
00:10:06,740 --> 00:10:10,260
This data fetching is a side effect.
219
00:10:10,260 --> 00:10:12,870
It's not directly related to the UI.
220
00:10:12,870 --> 00:10:15,000
Of course the result is
221
00:10:15,000 --> 00:10:18,443
but not the data storage access itself.
222
00:10:19,410 --> 00:10:22,340
And we wanna run it as a side effect with useEffect
223
00:10:22,340 --> 00:10:25,870
in this case to a wide and infinite loop
224
00:10:25,870 --> 00:10:27,970
and to make sure that this code
225
00:10:27,970 --> 00:10:31,000
which potentially could also be performance intensive
226
00:10:31,000 --> 00:10:34,630
does not run for every component re-render cycle
227
00:10:34,630 --> 00:10:36,793
but only if we wanted to run.
228
00:10:37,680 --> 00:10:40,830
Now, let's refine our data storage example here
229
00:10:40,830 --> 00:10:44,210
by also making sure that when we click the log out button
230
00:10:44,210 --> 00:10:46,520
we again reach out to local storage
231
00:10:46,520 --> 00:10:50,950
and we remove the isLoggedIn key there.
232
00:10:50,950 --> 00:10:52,500
Simply to clear it from there
233
00:10:52,500 --> 00:10:54,450
so that we don't have to clear it manually
234
00:10:54,450 --> 00:10:55,623
by selecting it here.
18271
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.