1
00:00:01,110 --> 00:00:04,650
‫So let's now learn about the next important tool

2
00:00:04,650 --> 00:00:08,883
‫in our React toolbox, which is the useEffect hook.

3
00:00:10,350 --> 00:00:13,680
‫So we already know about the useState hook,

4
00:00:13,680 --> 00:00:16,560
‫and so now it's time for our second hook,

5
00:00:16,560 --> 00:00:19,593
‫which is again, the useEffect hook.

6
00:00:20,430 --> 00:00:24,450
‫Now, the idea of the useEffect hook is to give us a place

7
00:00:24,450 --> 00:00:29,100
‫where we can safely write side effects like this one.

8
00:00:29,100 --> 00:00:32,160
‫Just, again, like our data fetching.

9
00:00:32,160 --> 00:00:36,180
‫But the side effects registered with the useEffect hook

10
00:00:36,180 --> 00:00:39,570
‫will only be executed after certain renders.

11
00:00:39,570 --> 00:00:43,290
‫For example, only write after the initial render,

12
00:00:43,290 --> 00:00:47,880
‫which is exactly what we are looking for in this situation.

13
00:00:47,880 --> 00:00:51,300
‫Now, we will learn all about what this hook actually is,

14
00:00:51,300 --> 00:00:54,333
‫but for now, let's just use it in practice.

15
00:00:55,830 --> 00:00:59,937
‫So just like with useState, we just write useEffect,

16
00:01:01,530 --> 00:01:03,630
‫and then we also need to make sure

17
00:01:03,630 --> 00:01:08,630
‫that it has been imported automatically here from React.

18
00:01:08,970 --> 00:01:10,710
‫So just like useState, again,

19
00:01:10,710 --> 00:01:13,800
‫this is also a function that is part of React,

20
00:01:13,800 --> 00:01:16,203
‫and so therefore that we need to import.

21
00:01:17,400 --> 00:01:20,400
‫Now, the use effect doesn't return anything

22
00:01:20,400 --> 00:01:23,730
‫so we don't store the result into any variable,

23
00:01:23,730 --> 00:01:26,013
‫but instead we pass in a function.

24
00:01:27,000 --> 00:01:29,910
‫And so this function is then called our effect,

25
00:01:29,910 --> 00:01:32,610
‫and it contains the code that we want to run

26
00:01:32,610 --> 00:01:33,813
‫as a side effect.

27
00:01:35,610 --> 00:01:38,850
‫So basically that we want to register as a side effect

28
00:01:38,850 --> 00:01:41,493
‫to be executed at a certain point in time.

29
00:01:42,630 --> 00:01:47,100
‫So let's paste that here, but we are actually not done yet,

30
00:01:47,100 --> 00:01:50,160
‫because now we need to pass in a second argument,

31
00:01:50,160 --> 00:01:52,950
‫which is the so-called dependency array.

32
00:01:52,950 --> 00:01:55,110
‫Now, this dependency array is actually

33
00:01:55,110 --> 00:01:59,190
‫the most confusing part of this hook, and we will, again,

34
00:01:59,190 --> 00:02:01,890
‫learn all about this throughout this section.

35
00:02:01,890 --> 00:02:03,750
‫But for now, what you need to do here

36
00:02:03,750 --> 00:02:06,300
‫is to just pass in this empty array,

37
00:02:06,300 --> 00:02:10,080
‫which means that the effect that we just specified here

38
00:02:10,080 --> 00:02:12,660
‫will only run on mount.

39
00:02:12,660 --> 00:02:15,930
‫So it'll only run when this app component here

40
00:02:15,930 --> 00:02:18,930
‫renders for the very first time.

41
00:02:18,930 --> 00:02:23,930
‫And so now, here, let's change this back to setMovies,

42
00:02:24,780 --> 00:02:28,200
‫give it a safe, and yeah, our movies here

43
00:02:28,200 --> 00:02:32,490
‫are in the user interface, but even more importantly,

44
00:02:32,490 --> 00:02:35,973
‫let's check if the problem from before has been solved.

45
00:02:37,110 --> 00:02:40,890
‫And indeed, now we have no more infinite loops here

46
00:02:40,890 --> 00:02:45,060
‫and no more infinite requests to our API.

47
00:02:45,060 --> 00:02:48,300
‫So the problem that we created in the previous lecture

48
00:02:48,300 --> 00:02:50,550
‫has indeed been fixed.

49
00:02:50,550 --> 00:02:53,400
‫And so now our effect is only running

50
00:02:53,400 --> 00:02:55,800
‫as the component mounts.

51
00:02:55,800 --> 00:03:00,690
‫Great, and so this is basically the very bare bones way

52
00:03:00,690 --> 00:03:04,530
‫in which we do data fetching in simple React applications

53
00:03:04,530 --> 00:03:08,490
‫like this one, at least if we want to fetch our data

54
00:03:08,490 --> 00:03:11,340
‫as soon as the application loads.

55
00:03:11,340 --> 00:03:14,190
‫Now, in a larger, more real world application,

56
00:03:14,190 --> 00:03:18,300
‫we may use some external library for data fetching.

57
00:03:18,300 --> 00:03:21,480
‫But again, in a small application like this one,

58
00:03:21,480 --> 00:03:26,160
‫this is now a great way to fetch some data on mount,

59
00:03:26,160 --> 00:03:29,580
‫so when our application first loads.

60
00:03:29,580 --> 00:03:32,940
‫So let's just quickly recap here.

61
00:03:32,940 --> 00:03:37,020
‫So we used the useEffect hook to register an effect.

62
00:03:37,020 --> 00:03:39,900
‫And so that effect is this function right here,

63
00:03:39,900 --> 00:03:43,440
‫which contains the side effect that we want to register.

64
00:03:43,440 --> 00:03:46,950
‫And basically, register means that we want this code here

65
00:03:46,950 --> 00:03:49,680
‫not to run as the component renders,

66
00:03:49,680 --> 00:03:53,370
‫but actually after it has been painted onto the screen.

67
00:03:53,370 --> 00:03:56,400
‫And so that's exactly what useEffect does.

68
00:03:56,400 --> 00:03:59,130
‫So while before, the code was executed

69
00:03:59,130 --> 00:04:01,560
‫while the component was rendering,

70
00:04:01,560 --> 00:04:04,590
‫so while the function was being executed,

71
00:04:04,590 --> 00:04:08,790
‫now this effect will actually be executed after render.

72
00:04:08,790 --> 00:04:10,680
‫And so that's a lot better.

73
00:04:10,680 --> 00:04:12,720
‫Then, as a second argument,

74
00:04:12,720 --> 00:04:16,740
‫we passed this empty array here into useEffect.

75
00:04:16,740 --> 00:04:20,940
‫And so this means that this effect will only be executed

76
00:04:20,940 --> 00:04:23,760
‫as the component first mounts.

77
00:04:23,760 --> 00:04:26,100
‫Okay, and that's actually it.

78
00:04:26,100 --> 00:04:29,910
‫So this is how we use the useEffect hook in practice

79
00:04:29,910 --> 00:04:32,520
‫in a simple situation like this.

80
00:04:32,520 --> 00:04:36,240
‫And so next up, let's now take a bit of a closer look

81
00:04:36,240 --> 00:04:37,533
‫at this new hook.