WEBVTT

1
00:00:00.160 --> 00:00:01.380
Hi and welcome back.

2
00:00:01.400 --> 00:00:04.690
Today we're going to be discussing
a hook called Use Effect.

3
00:00:04.720 --> 00:00:07.490
You're now looking at my screen
with my editor opened,

4
00:00:07.520 --> 00:00:10.340
my simulator running,
and my Metro bundler's running as well.

5
00:00:10.370 --> 00:00:12.860
And we just see the Hello World Start

6
00:00:12.890 --> 00:00:16.620
application that we designed
in the beginning of our course.

7
00:00:16.650 --> 00:00:22.020
Because I just cleaned up my code so that
you can understand how Use Effects work.

8
00:00:22.050 --> 00:00:24.020
So sometimes there comes a time when

9
00:00:24.050 --> 00:00:28.500
on change of data,
you want to follow up with an action or

10
00:00:28.530 --> 00:00:33.340
whenever application renders you want
to do something right after then.

11
00:00:33.370 --> 00:00:39.740
So if that's the case for functional
components, you could use Use Effect Hook.

12
00:00:39.770 --> 00:00:45.460
To use Use Effect Hook, you must
import it from React, right here.

13
00:00:45.490 --> 00:00:46.940
And then let's discuss.

14
00:00:46.970 --> 00:00:50.780
How does using use effect hook look like?

15
00:00:50.810 --> 00:00:56.020
So if you want to use Effect Hook,
you're going to have to basically

16
00:00:56.050 --> 00:01:01.820
a function that is executed and you can
determine when this function is running.

17
00:01:01.850 --> 00:01:04.340
For example, if you want this function

18
00:01:04.370 --> 00:01:09.980
to run right on the components render,
you can pass it an array that is an empty

19
00:01:10.010 --> 00:01:15.900
dependency array that says that on the
components render run this function.

20
00:01:15.930 --> 00:01:18.210
So for example, if we were to console log

21
00:01:18.240 --> 00:01:23.980
here, the component has rendered
and save it.

22
00:01:24.010 --> 00:01:26.020
If we go to our terminal and reload our

23
00:01:26.050 --> 00:01:28.900
application,
we're going to see that the component has

24
00:01:28.930 --> 00:01:32.820
rendered console log is
right inside our terminal.

25
00:01:32.850 --> 00:01:36.060
So what is this dependency array exactly?

26
00:01:36.090 --> 00:01:39.380
Here you can pass some kind of variables

27
00:01:39.410 --> 00:01:43.140
and you can say that on that
variable or data change -

28
00:01:43.170 --> 00:01:44.100
run this function.

29
00:01:44.130 --> 00:01:49.340
Now since this is empty,
it will run on render of the screen.

30
00:01:49.370 --> 00:01:56.540
So if I were to just simply
place a space here and then save it,

31
00:01:56.570 --> 00:01:59.490
you're going to see
this pop up here again.

32
00:01:59.520 --> 00:02:04.340
So every time this component renders,
this function will run.

33
00:02:04.370 --> 00:02:10.450
Now what if we want to run this function
when some kind of data changes?

34
00:02:10.480 --> 00:02:13.580
Since we already know what useState Hook

35
00:02:13.610 --> 00:02:18.610
is and how it works, we could use
useState to define a variable.

36
00:02:18.640 --> 00:02:19.660
So let's do that.

37
00:02:19.690 --> 00:02:23.140
Let's create a new variable
and let's call it text.

38
00:02:23.170 --> 00:02:26.020
And then let's create a setter for it

39
00:02:26.050 --> 00:02:30.500
and let's useState here and then
just give it an empty string.

40
00:02:30.530 --> 00:02:33.940
Now let's create another use effect here.

41
00:02:33.970 --> 00:02:37.300
And let's say that whenever text changes,

42
00:02:37.330 --> 00:02:42.170
we want to console log
the text has changed.

43
00:02:42.200 --> 00:02:47.060
Now we're going to observe a very
interesting thing in our terminal.

44
00:02:47.090 --> 00:02:50.480
Okay, so let me open it up.

45
00:02:52.200 --> 00:02:52.660
Great.

46
00:02:52.690 --> 00:02:58.140
So here if I reload my application,
you're going to see two console logs.

47
00:02:58.160 --> 00:03:00.100
First one is going to be that the text has

48
00:03:00.130 --> 00:03:04.020
changed and second one is going to be
that the component has rendered.

49
00:03:04.050 --> 00:03:08.260
But you can argue that we didn't
really change any kind of text.

50
00:03:08.290 --> 00:03:15.180
Now if you have some variables set here
and you use useState to set them,

51
00:03:15.210 --> 00:03:20.780
useState will set this text
variable to the empty string.

52
00:03:20.810 --> 00:03:24.060
From a nonexistent value on Render because

53
00:03:24.090 --> 00:03:29.020
text value didn't really
exist and now it has a value.

54
00:03:29.050 --> 00:03:33.660
You are still going
to see this shown here.

55
00:03:33.690 --> 00:03:37.940
However, let's say that onpress

56
00:03:37.970 --> 00:03:41.660
we would like to set
text to something else.

57
00:03:41.690 --> 00:03:46.100
Let's say it's going to be hello, world.

58
00:03:46.130 --> 00:03:50.180
I just used use effect hook.
Right.

59
00:03:50.210 --> 00:03:54.820
Let's save this and then
let's reload our application.

60
00:03:54.840 --> 00:03:57.140
You're still seeing these
two logs appear here.

61
00:03:57.170 --> 00:04:02.820
And now if I were to press here, you are
going to see this appear here again,

62
00:04:02.850 --> 00:04:06.820
because the value of the text has changed.

63
00:04:06.850 --> 00:04:11.340
To just make it more visible that this
value changed, we can just use the text

64
00:04:11.370 --> 00:04:16.720
variable here and we can
reload our application.

65
00:04:17.200 --> 00:04:19.860
And since now our text is actually

66
00:04:19.880 --> 00:04:23.300
an empty string, we don't see anything
here, so we can't click on anything.

67
00:04:23.330 --> 00:04:26.260
I'm just going to change
the text variable as well.

68
00:04:26.280 --> 00:04:29.300
And I'm just going to give
it the value of Hello World.

69
00:04:29.330 --> 00:04:30.540
Great, let's save this.

70
00:04:30.570 --> 00:04:33.460
And now we do see
the Hello World appear here.

71
00:04:33.480 --> 00:04:34.980
Let's reload the application.

72
00:04:35.010 --> 00:04:37.300
We have these two logs and I will click

73
00:04:37.330 --> 00:04:42.140
here, you will see the text change and you
will see the follow up log as well.

74
00:04:42.160 --> 00:04:44.453
Now, if I click here again,

75
00:04:44.653 --> 00:04:48.020
you are not going to see any more logs pop

76
00:04:48.040 --> 00:04:50.660
up because the value
has not really changed.

77
00:04:50.690 --> 00:04:52.260
The value is still same.

78
00:04:52.280 --> 00:04:54.380
So it doesn't matter how many
times you're going to click

79
00:04:54.410 --> 00:04:56.420
since the value of the text variable

80
00:04:56.450 --> 00:05:01.060
hasn't changed,
this Use Effect Hook will not run.

81
00:05:01.090 --> 00:05:06.620
Now let's say that we set
our text to be zero

82
00:05:06.650 --> 00:05:13.900
and then every time set text is clicked,
we add one to this text, right?

83
00:05:13.920 --> 00:05:15.420
So this is zero.

84
00:05:15.450 --> 00:05:19.980
Now, if I were to reload our application,
we're going to see these two logs again.

85
00:05:20.010 --> 00:05:23.060
And if I click here,
every time I click here,

86
00:05:23.090 --> 00:05:28.140
since the value is changing,
you're going to see this pop up here.

87
00:05:28.170 --> 00:05:33.860
Now, since you already understand how Use
effects work and that they run as a side

88
00:05:33.890 --> 00:05:41.140
effect of some action happening,
and we can track the variables and decide

89
00:05:41.170 --> 00:05:47.900
which use effects to run according
to that, let's talk about normally

90
00:05:47.920 --> 00:05:50.460
when would you use use effects?

91
00:05:50.480 --> 00:05:53.100
You could use Use Effect Hook for fetching

92
00:05:53.130 --> 00:05:57.180
data from an API whenever some
kind of action happens here.

93
00:05:57.210 --> 00:06:01.420
For example, if user presses on a book

94
00:06:01.440 --> 00:06:04.620
that they're interested in your
application, you could call an API

95
00:06:04.650 --> 00:06:07.740
and fetch information about
that particular book.

96
00:06:07.770 --> 00:06:12.500
You could use it for string up timers
or intervals to perform some task

97
00:06:12.530 --> 00:06:15.300
for example, every x seconds.

98
00:06:15.330 --> 00:06:18.500
You could use it for subscribing to events

99
00:06:18.530 --> 00:06:23.780
such as whenever a scroll
event occurs on the screen.

100
00:06:23.800 --> 00:06:28.500
The main point here is that by using
the Use Effect Hook to manage side

101
00:06:28.530 --> 00:06:33.540
effects, you can keep your components
more modular and easier to reason about.

102
00:06:33.570 --> 00:06:38.540
The Use Effect Hook allows you to separate
your concerns and keep your rendering

103
00:06:38.570 --> 00:06:42.420
logic separate from your
side effect logic.

104
00:06:42.450 --> 00:06:46.300
I hope this class was useful for you.

105
00:06:46.330 --> 00:06:47.940
Thanks so much for watching.

106
00:06:47.970 --> 00:06:52.200
And in the next video,
we're going to discuss use ref hook.