1
00:00:01,110 --> 00:00:04,170
‫So we just used the used effect hook

2
00:00:04,170 --> 00:00:07,980
‫for the very first time in order to fetch movie data

3
00:00:07,980 --> 00:00:10,230
‫as the component mounts.

4
00:00:10,230 --> 00:00:12,583
‫But what actually is an effect

5
00:00:12,583 --> 00:00:16,830
‫and how is it different from an event handler function?

6
00:00:16,830 --> 00:00:19,683
‫Well, let's find out in this video.

7
00:00:20,730 --> 00:00:23,160
‫And just so we're all on the same page,

8
00:00:23,160 --> 00:00:27,270
‫let's start by reviewing what a side effect is.

9
00:00:27,270 --> 00:00:29,580
‫So basically in React,

10
00:00:29,580 --> 00:00:33,518
‫a side effect is any interaction between a React component

11
00:00:33,518 --> 00:00:37,290
‫and a world outside that component.

12
00:00:37,290 --> 00:00:39,720
‫And we can think of a side effect

13
00:00:39,720 --> 00:00:43,470
‫as some code that actually makes something useful happen.

14
00:00:43,470 --> 00:00:46,743
‫For example, fetching data from some API.

15
00:00:47,700 --> 00:00:50,880
‫So what this means is that we actually need

16
00:00:50,880 --> 00:00:55,380
‫side effects all the time when we build React apps.

17
00:00:55,380 --> 00:00:59,058
‫Now, we already know that side effects should not happen

18
00:00:59,058 --> 00:01:03,030
‫during the component render, or in other words

19
00:01:03,030 --> 00:01:07,140
‫side effects should not be in render logic.

20
00:01:07,140 --> 00:01:09,450
‫Instead, we can create side effects

21
00:01:09,450 --> 00:01:12,660
‫in two different places in React.

22
00:01:12,660 --> 00:01:16,470
‫And the first one is inside event handlers.

23
00:01:16,470 --> 00:01:19,170
‫And remember that event handlers are simply

24
00:01:19,170 --> 00:01:22,290
‫functions that are triggered whenever the event

25
00:01:22,290 --> 00:01:25,035
‫that they are listening to happens.

26
00:01:25,035 --> 00:01:30,035
‫However, simply reacting to events is sometimes not enough

27
00:01:30,060 --> 00:01:32,580
‫for what an application needs.

28
00:01:32,580 --> 00:01:35,340
‫Instead, in some situations, we need to

29
00:01:35,340 --> 00:01:39,060
‫write some code that will be executed automatically

30
00:01:39,060 --> 00:01:41,250
‫as the component renders.

31
00:01:41,250 --> 00:01:44,877
‫And so this is when we can create a so-called effect

32
00:01:44,877 --> 00:01:48,270
‫by using the useEffect hook.

33
00:01:48,270 --> 00:01:50,370
‫So by creating an effect

34
00:01:50,370 --> 00:01:53,220
‫we can basically write code that will run

35
00:01:53,220 --> 00:01:57,360
‫at different moments of a component instance life cycle.

36
00:01:57,360 --> 00:02:00,540
‫So when the component mounts, when it re-renders,

37
00:02:00,540 --> 00:02:03,060
‫or even when it unmounts.

38
00:02:03,060 --> 00:02:04,794
‫And this is really great

39
00:02:04,794 --> 00:02:09,794
‫because it opens up a whole new door of possibilities.

40
00:02:10,050 --> 00:02:13,350
‫Okay, but let's now get just a bit deeper

41
00:02:13,350 --> 00:02:17,031
‫into how effects work by comparing event handlers

42
00:02:17,031 --> 00:02:21,360
‫to effects created with the useEffect hook.

43
00:02:21,360 --> 00:02:23,370
‫And let's go back to the example

44
00:02:23,370 --> 00:02:27,090
‫of fetching movie data that we have been using.

45
00:02:27,090 --> 00:02:31,568
‫So fetching movie data is very clearly a side effect

46
00:02:31,568 --> 00:02:34,560
‫because it's clearly an interaction

47
00:02:34,560 --> 00:02:37,233
‫with the world outside the component.

48
00:02:38,100 --> 00:02:40,109
‫Now, there are two different possibilities

49
00:02:40,109 --> 00:02:44,400
‫of when we might want to create this side effect.

50
00:02:44,400 --> 00:02:47,220
‫The first possibility is that we might want to

51
00:02:47,220 --> 00:02:51,480
‫fetch movie data only when a certain event happens.

52
00:02:51,480 --> 00:02:53,010
‫So in that case, we will

53
00:02:53,010 --> 00:02:56,430
‫of course just use an event handler function.

54
00:02:56,430 --> 00:03:00,030
‫So just like we have been doing up until this point

55
00:03:00,030 --> 00:03:03,780
‫I mean we haven't been using event handlers to fetch data

56
00:03:03,780 --> 00:03:07,140
‫but we have used them for other stuff.

57
00:03:07,140 --> 00:03:08,820
‫Now the other possibility

58
00:03:08,820 --> 00:03:12,589
‫of when to fetch the data would be to do so immediately

59
00:03:12,589 --> 00:03:15,030
‫after the component mounts,

60
00:03:15,030 --> 00:03:17,610
‫so after it is first rendered.

61
00:03:17,610 --> 00:03:19,621
‫And so this is exactly what we did

62
00:03:19,621 --> 00:03:23,091
‫in the previous lecture when we first used the use event

63
00:03:23,091 --> 00:03:27,410
‫to specify an effect that was executed right

64
00:03:27,410 --> 00:03:31,980
‫after the component was painted to the screen.

65
00:03:31,980 --> 00:03:34,320
‫So we can say that these two pieces

66
00:03:34,320 --> 00:03:37,860
‫of code produce the exact same result.

67
00:03:37,860 --> 00:03:40,395
‫So they both fetch data about a movie

68
00:03:40,395 --> 00:03:44,490
‫but they do so at different moments in time.

69
00:03:44,490 --> 00:03:47,970
‫So the event handler executes when an event happens

70
00:03:47,970 --> 00:03:52,740
‫and the effect executes whenever the component first renders

71
00:03:52,740 --> 00:03:56,640
‫at least in this situation because the exact moment

72
00:03:56,640 --> 00:04:00,210
‫at which the effect is executed actually depends

73
00:04:00,210 --> 00:04:02,100
‫on its dependency array

74
00:04:02,100 --> 00:04:05,430
‫which I shortly mentioned in the last video.

75
00:04:05,430 --> 00:04:08,970
‫So we can basically use this dependency array to

76
00:04:08,970 --> 00:04:13,970
‫tell the effect to also run after a component re-renders.

77
00:04:13,980 --> 00:04:16,620
‫But I won't go deep into this right now

78
00:04:16,620 --> 00:04:20,100
‫because that's easier to explain with code.

79
00:04:20,100 --> 00:04:24,560
‫But speaking of the dependency array, this array is just one

80
00:04:24,560 --> 00:04:29,130
‫of three parts that any effect can have.

81
00:04:29,130 --> 00:04:31,320
‫So besides the dependency array

82
00:04:31,320 --> 00:04:34,480
‫we have of course the effect code itself.

83
00:04:34,480 --> 00:04:38,069
‫And also each effect can return a so-called

84
00:04:38,069 --> 00:04:42,780
‫cleanup function, which is a function that will be called

85
00:04:42,780 --> 00:04:46,770
‫before the component re-renders or unmounts.

86
00:04:46,770 --> 00:04:49,110
‫Now thinking about different moments

87
00:04:49,110 --> 00:04:51,180
‫of the component lifecycle,

88
00:04:51,180 --> 00:04:55,560
‫so mounting, re-rendering and unmounting, can be very

89
00:04:55,560 --> 00:04:59,220
‫helpful to understand how effects work.

90
00:04:59,220 --> 00:05:03,150
‫However, we should actually not think about life cycles,

91
00:05:03,150 --> 00:05:05,880
‫but about synchronization.

92
00:05:05,880 --> 00:05:10,470
‫So the real reason why effects exist is not to run code

93
00:05:10,470 --> 00:05:13,500
‫at different points of the life cycle, but to

94
00:05:13,500 --> 00:05:17,910
‫keep a component synchronized with some external system.

95
00:05:17,910 --> 00:05:21,570
‫So in this example, that would be to keep the component

96
00:05:21,570 --> 00:05:24,540
‫in sync with the movie data that comes

97
00:05:24,540 --> 00:05:27,240
‫from some external API.

98
00:05:27,240 --> 00:05:30,660
‫And if that sounds super confusing, keep in mind

99
00:05:30,660 --> 00:05:34,350
‫that this is just a first introduction to effects.

100
00:05:34,350 --> 00:05:37,650
‫We will come back to all this after having used

101
00:05:37,650 --> 00:05:40,865
‫the useEffect hook a bit more in practice.

102
00:05:40,865 --> 00:05:44,180
‫But anyway, to finish our comparison here,

103
00:05:44,180 --> 00:05:48,690
‫as we just learned, we use effects to keep a component

104
00:05:48,690 --> 00:05:51,390
‫in sync with the external world.

105
00:05:51,390 --> 00:05:54,600
‫While on the other hand we use event handlers

106
00:05:54,600 --> 00:05:56,850
‫to React to a certain event

107
00:05:56,850 --> 00:05:59,910
‫that happened in the user interface.

108
00:05:59,910 --> 00:06:02,580
‫Now, what's very important to note here is

109
00:06:02,580 --> 00:06:05,880
‫that event handlers are always the preferred way

110
00:06:05,880 --> 00:06:08,061
‫of creating side effects.

111
00:06:08,061 --> 00:06:10,020
‫So whenever possible

112
00:06:10,020 --> 00:06:12,764
‫we should not overuse the useEffect hook.

113
00:06:12,764 --> 00:06:16,246
‫So basically everything that can be handled

114
00:06:16,246 --> 00:06:20,163
‫inside event handlers should be handled there.