1
00:00:01,140 --> 00:00:04,920
‫Let's now convert our effect to an async function

2
00:00:04,920 --> 00:00:07,530
‫instead of the basic promise handling

3
00:00:07,530 --> 00:00:09,123
‫that we're doing right now.

4
00:00:10,530 --> 00:00:13,290
‫So, many times when we need a lot of code

5
00:00:13,290 --> 00:00:14,880
‫to handle a promise,

6
00:00:14,880 --> 00:00:19,290
‫it's a lot easier and nicer to just have an async function.

7
00:00:19,290 --> 00:00:20,880
‫And here, I will just assume

8
00:00:20,880 --> 00:00:23,943
‫that you already know what async await is.

9
00:00:25,650 --> 00:00:28,260
‫So we might think that all we need to do

10
00:00:28,260 --> 00:00:30,660
‫in order to use an async function

11
00:00:30,660 --> 00:00:33,571
‫is to place the async keyword here,

12
00:00:33,571 --> 00:00:37,440
‫and then use await inside of it.

13
00:00:37,440 --> 00:00:41,250
‫However, we immediately get this warning from ESLint

14
00:00:41,250 --> 00:00:43,680
‫which tells us that effect callbacks

15
00:00:43,680 --> 00:00:47,460
‫are synchronous to prevent race conditions.

16
00:00:47,460 --> 00:00:49,380
‫So basically the effect function

17
00:00:49,380 --> 00:00:54,300
‫that we place into use effect cannot return a promise,

18
00:00:54,300 --> 00:00:56,943
‫which is what an async function does.

19
00:00:58,950 --> 00:01:01,920
‫So instead of doing it directly like this,

20
00:01:01,920 --> 00:01:03,723
‫we just create a new function.

21
00:01:08,270 --> 00:01:12,030
‫And then we place the async function in there.

22
00:01:12,030 --> 00:01:14,263
‫So let's call this one fetchMovies.

23
00:01:17,921 --> 00:01:21,690
‫And then let's of course adapt this function here,

24
00:01:21,690 --> 00:01:23,583
‫to using the await keyword.

25
00:01:25,530 --> 00:01:29,430
‫So const res equals await,

26
00:01:29,430 --> 00:01:33,162
‫and again, I'm assuming that you already know

27
00:01:33,162 --> 00:01:35,580
‫how all of this works.

28
00:01:35,580 --> 00:01:38,640
‫So that converting to promises to an async function

29
00:01:38,640 --> 00:01:41,463
‫is nothing new for you at this point.

30
00:01:42,510 --> 00:01:44,550
‫So data will be the result

31
00:01:44,550 --> 00:01:48,720
‫of converting the response to JSON,

32
00:01:48,720 --> 00:01:52,203
‫which is again, an asynchronous operation.

33
00:01:53,520 --> 00:01:58,097
‫And then, finally, we can set the movies to data.Search.

34
00:01:59,550 --> 00:02:01,353
‫So just what we had here.

35
00:02:04,470 --> 00:02:05,303
‫All right.

36
00:02:05,303 --> 00:02:07,530
‫But now of course nothing is happening,

37
00:02:07,530 --> 00:02:11,280
‫because nowhere we are calling this function.

38
00:02:11,280 --> 00:02:14,670
‫So that's also why this gets this yellow underline here.

39
00:02:14,670 --> 00:02:17,373
‫So our effect is now this function right here.

40
00:02:19,290 --> 00:02:21,570
‫But this function, all it's doing right now,

41
00:02:21,570 --> 00:02:23,793
‫is to define yet another function.

42
00:02:24,739 --> 00:02:26,010
‫So this async fetchMovies.

43
00:02:26,010 --> 00:02:30,060
‫And so then at the end, we just call it,

44
00:02:30,060 --> 00:02:32,700
‫and then it is back to working.

45
00:02:32,700 --> 00:02:35,629
‫Now here, I just want to extract this here

46
00:02:35,629 --> 00:02:37,740
‫for now into another variable,

47
00:02:37,740 --> 00:02:39,963
‫which I'm going to call query.

48
00:02:42,150 --> 00:02:44,133
‫And this is just temporary here.

49
00:02:47,610 --> 00:02:48,630
‫Now, okay.

50
00:02:48,630 --> 00:02:53,220
‫And now what I also want to do is to log our movies here.

51
00:02:53,220 --> 00:02:56,940
‫So the movies that we received from the API to the console,

52
00:02:56,940 --> 00:02:58,683
‫just so I can show you something.

53
00:02:59,550 --> 00:03:03,240
‫Let's first reload to get rid of the arrows there.

54
00:03:03,240 --> 00:03:05,403
‫And now what I want to do here, again,

55
00:03:06,270 --> 00:03:08,523
‫is to log our movies to the console.

56
00:03:09,510 --> 00:03:12,990
‫So, do you think that I can just do this?

57
00:03:12,990 --> 00:03:15,510
‫So you think that this is going to work?

58
00:03:15,510 --> 00:03:16,343
‫Well, let's see.

59
00:03:17,190 --> 00:03:20,190
‫And let's reload to actually see the truer result,

60
00:03:20,190 --> 00:03:23,040
‫which is an empty array.

61
00:03:23,040 --> 00:03:25,110
‫So why is this happening?

62
00:03:25,110 --> 00:03:28,500
‫Well, hopefully you learned in the previous section

63
00:03:28,500 --> 00:03:31,950
‫that setting state is asynchronous.

64
00:03:31,950 --> 00:03:34,440
‫So in other words, after the state

65
00:03:34,440 --> 00:03:37,140
‫has been set here in this line of code,

66
00:03:37,140 --> 00:03:41,130
‫or actually after we instructed React to set the state,

67
00:03:41,130 --> 00:03:44,400
‫that doesn't mean that this happens immediately.

68
00:03:44,400 --> 00:03:46,050
‫So instead, it will happen

69
00:03:46,050 --> 00:03:48,870
‫after this function here has been called.

70
00:03:48,870 --> 00:03:53,160
‫And so right here in this line of code, we have stale state

71
00:03:53,160 --> 00:03:56,580
‫which basically means that we still have the old value

72
00:03:56,580 --> 00:03:58,350
‫as the state was before.

73
00:03:58,350 --> 00:04:01,890
‫And in this case, before, it was just the empty array.

74
00:04:01,890 --> 00:04:03,213
‫So our initial state.

75
00:04:04,560 --> 00:04:09,560
‫So here we can basically then use data.Search again.

76
00:04:09,810 --> 00:04:13,623
‫And so, as we reload now, then we get here the output.

77
00:04:14,490 --> 00:04:16,240
‫Now what I wanted to talk about

78
00:04:17,089 --> 00:04:19,470
‫is why we always have these two outputs.

79
00:04:19,470 --> 00:04:23,700
‫So, basically why we have these two requests here happening.

80
00:04:23,700 --> 00:04:27,690
‫Well, the reason for that is React's strict mode.

81
00:04:27,690 --> 00:04:31,590
‫So when strict mode is activated in React 18,

82
00:04:31,590 --> 00:04:36,120
‫our effects will not run only once, but actually twice.

83
00:04:36,120 --> 00:04:39,030
‫So React will call our effects twice

84
00:04:39,030 --> 00:04:41,370
‫but only in development.

85
00:04:41,370 --> 00:04:43,530
‫So when our application is in production,

86
00:04:43,530 --> 00:04:45,600
‫this will no longer be happening.

87
00:04:45,600 --> 00:04:48,360
‫And so this is just so that React can identify

88
00:04:48,360 --> 00:04:51,303
‫if there are any problems with our effects.

89
00:04:52,230 --> 00:04:56,507
‫So if we come here quickly just to index.JS

90
00:04:56,507 --> 00:04:59,973
‫and if we remove the strict mode from here,

91
00:05:02,730 --> 00:05:05,380
‫well then we have this problem.

92
00:05:05,380 --> 00:05:07,410
‫Let's actually remove the code.

93
00:05:07,410 --> 00:05:09,840
‫Let's save and let's reload.

94
00:05:09,840 --> 00:05:13,350
‫And then you see that we only get one output here,

95
00:05:13,350 --> 00:05:16,953
‫which means that there was only one HTTP request.

96
00:05:18,060 --> 00:05:22,080
‫So the effect was only called once indeed.

97
00:05:22,080 --> 00:05:23,580
‫But let's put it back

98
00:05:23,580 --> 00:05:26,253
‫because this is somehow a bit safer.

99
00:05:28,320 --> 00:05:31,620
‫Now, okay, and that's it for this video.

100
00:05:31,620 --> 00:05:34,920
‫Next up, let's make this data fetching here

101
00:05:34,920 --> 00:05:37,563
‫a bit more complete with a loading state.