1
00:00:00,880 --> 00:00:05,530
We're now going to focus on making sure that we canceled that previous Taimur in order to get properly,

2
00:00:05,530 --> 00:00:06,330
cancel that timer.

3
00:00:06,430 --> 00:00:09,780
We're going to need to learn a little bit more about the use effect hook.

4
00:00:10,420 --> 00:00:13,900
So going to go back over to my editor in for just a little bit here.

5
00:00:14,290 --> 00:00:16,840
I'm going to take everything that we wrote into use effect.

6
00:00:17,860 --> 00:00:22,390
And I'm going to delete it now, I would encourage you to just comment that code out if you want to

7
00:00:22,390 --> 00:00:23,740
follow along, don't delete it.

8
00:00:23,770 --> 00:00:28,150
Just commented, I am only deleting it just to make the code that I'm about to write inside of here

9
00:00:28,150 --> 00:00:29,350
to give you a quick demonstration.

10
00:00:29,620 --> 00:00:30,700
Really easy to follow.

11
00:00:31,750 --> 00:00:36,040
All right, so let's do a quick review unus effect in general and what this function right here would

12
00:00:36,040 --> 00:00:39,370
do for us with the current configuration we are providing as a second argument.

13
00:00:40,420 --> 00:00:45,640
With this current setup, we're going to invoke that arrow function the very first time our component

14
00:00:45,640 --> 00:00:46,600
is rendered to the screen.

15
00:00:47,230 --> 00:00:52,360
We will then also invoke this function any time the term piece of state changes.

16
00:00:52,750 --> 00:00:58,040
So those are the two scenarios where this arrow function is going to get invoked just to confirm that.

17
00:00:58,180 --> 00:01:03,710
Let's put a console log inside of here and say initial render or term was changed.

18
00:01:05,250 --> 00:01:06,080
I'll then save this.

19
00:01:06,440 --> 00:01:07,130
Look back over.

20
00:01:08,100 --> 00:01:15,310
There is our initial render, and now if I make any changes to my term piece of state, I will see terms

21
00:01:15,350 --> 00:01:15,810
changed.

22
00:01:16,890 --> 00:01:18,560
And we can see that up here again and again.

23
00:01:19,340 --> 00:01:19,550
All right.

24
00:01:19,580 --> 00:01:21,110
So that's just normal use effect.

25
00:01:21,140 --> 00:01:22,340
We've already taken a look at that.

26
00:01:22,400 --> 00:01:23,270
Nothing is different.

27
00:01:23,900 --> 00:01:25,970
So here's the new topic I want to introduce.

28
00:01:26,660 --> 00:01:31,880
Whenever we define USIE fact or call it, and we provide and function as the first argument.

29
00:01:32,190 --> 00:01:37,430
There's only one possible value that we can return from this arrow function, only one type of value.

30
00:01:37,430 --> 00:01:38,720
We are allowed to return.

31
00:01:39,530 --> 00:01:41,000
The only thing that we are allowed to return.

32
00:01:42,120 --> 00:01:44,880
Is another function like so?

33
00:01:46,020 --> 00:01:49,470
I'm going to write out a return statement with an arrow function, and I'm gonna put inside of your

34
00:01:49,560 --> 00:01:51,400
console log of cleanup.

35
00:01:53,190 --> 00:01:57,570
The goal of this aero function right here is to do essentially some cleanup.

36
00:01:58,640 --> 00:02:03,860
Now, understanding what this function is for, how it works and what this is all about really comes

37
00:02:03,860 --> 00:02:09,260
down to understanding when React is going to call this function automatically when we return this function.

38
00:02:09,320 --> 00:02:11,010
React is going to keep a handle on it.

39
00:02:11,060 --> 00:02:15,230
It's going to keep a reference that function, and it's going to call that function for us automatically

40
00:02:15,260 --> 00:02:19,160
at some future point in time, understanding when it gets called.

41
00:02:19,370 --> 00:02:20,390
That's the whole challenge here.

42
00:02:20,450 --> 00:02:21,950
That's what I want to help you understand.

43
00:02:22,790 --> 00:02:24,650
Let's save this example right now.

44
00:02:25,190 --> 00:02:25,850
Look back over.

45
00:02:26,890 --> 00:02:29,810
And now you'll see we still have the same council log as before.

46
00:02:30,440 --> 00:02:33,650
So we did not see a council log of cleanup or anything like that.

47
00:02:34,400 --> 00:02:35,750
And then going to clear my council.

48
00:02:37,190 --> 00:02:39,090
And I'll change my search term once again.

49
00:02:39,990 --> 00:02:43,200
Now take a look at the result we get as soon as we make a change.

50
00:02:43,410 --> 00:02:46,050
The cleanup function gets invoked automatically.

51
00:02:46,680 --> 00:02:52,500
And then after that, the function that we provided to use effect itself is invoked again.

52
00:02:53,400 --> 00:02:58,800
So in other words, whenever our component first renders the overall arrow function is invoked and we

53
00:02:58,800 --> 00:03:01,230
return that arrow function right there.

54
00:03:02,220 --> 00:03:02,990
Then any time.

55
00:03:03,090 --> 00:03:09,600
That is time to run this aero function again, first react is going to call the cleanup function that

56
00:03:09,600 --> 00:03:11,460
it got from the last time use effect ran.

57
00:03:11,910 --> 00:03:14,610
And then it's going to call the overall aero function again.

58
00:03:15,990 --> 00:03:19,830
Now, when I describe that verbally, it's a little bit confusing, so we can see very easily with the

59
00:03:19,830 --> 00:03:20,440
console logs.

60
00:03:20,460 --> 00:03:22,140
This entire process in action.

61
00:03:23,140 --> 00:03:28,630
Whenever we first render our component, we see that the arrow function we provided to use effect itself

62
00:03:28,660 --> 00:03:29,290
gets called.

63
00:03:29,410 --> 00:03:30,730
That's what that console log means.

64
00:03:31,150 --> 00:03:33,010
So this entire thing right here got invoked.

65
00:03:33,980 --> 00:03:39,080
As soon as that is time or use effect to be invoked again, though, let's make a small change.

66
00:03:39,890 --> 00:03:43,790
First, the cleanup function we had returned from the last time around.

67
00:03:43,820 --> 00:03:48,110
Gets invoked and then the overall function gets invoked again.

68
00:03:49,140 --> 00:03:50,510
Now, one case that's still not clear.

69
00:03:50,570 --> 00:03:52,520
Let's take a look at this in diagram format.

70
00:03:53,830 --> 00:03:54,140
All right.

71
00:03:54,160 --> 00:03:54,520
Here we go.

72
00:03:56,260 --> 00:04:00,460
There are going to once again start off with the initial component, render the arrow function that

73
00:04:00,460 --> 00:04:05,140
we provided to use effect, gets called put on here, use the effect called to be a little bit more

74
00:04:05,140 --> 00:04:08,770
precise, or if I want to be really clear with my language, I would probably say something like.

75
00:04:09,840 --> 00:04:16,530
Bunk provided to use effect is called that is meant to indicate this overall erro function right there.

76
00:04:17,780 --> 00:04:19,070
That's the first thing that happens.

77
00:04:19,700 --> 00:04:22,640
We then return a cleanup function.

78
00:04:23,790 --> 00:04:25,880
And React is going to hold on to that cleanup function.

79
00:04:26,630 --> 00:04:31,640
Then the next time that we re render our component in that term piece of state changes, we're going

80
00:04:31,640 --> 00:04:32,510
to first.

81
00:04:33,560 --> 00:04:34,810
Invoke the cleanup.

82
00:04:34,940 --> 00:04:35,480
Function.

83
00:04:36,500 --> 00:04:41,330
There were taken that function, we returned at some point time in the past and it gets invoked automatically

84
00:04:42,050 --> 00:04:43,220
and then immediately after that.

85
00:04:44,500 --> 00:04:48,850
The function that we provided to use effect orld again.

86
00:04:49,970 --> 00:04:54,780
When we call it again, we are once again going to return to clean up function and this entire process

87
00:04:54,810 --> 00:04:59,950
is just going to repeat over and over and over again every single time that we re render our component.

88
00:05:00,600 --> 00:05:05,100
The next time we render it, we're going to invoke the cleanup function from the last time rondi function

89
00:05:05,100 --> 00:05:07,920
we provided to use effect again and return to cleanup function.

90
00:05:09,150 --> 00:05:14,070
OK, so that is what the meaning of that cleanup function is, essentially gives us a little point time

91
00:05:14,270 --> 00:05:18,240
and to do some cleanup or maintenance or just about anything can possibly imagine.

92
00:05:19,420 --> 00:05:23,590
This cleanup function is going to be the key to how we cancel the previous timer.

93
00:05:24,160 --> 00:05:29,680
Notice how this diagram right here and the fact that the cleanup timer or the cleanup function right

94
00:05:29,680 --> 00:05:33,940
there kind of looks suspiciously, suspiciously like how this diagram looks.

95
00:05:34,720 --> 00:05:36,160
So we don't want to run any cleanup.

96
00:05:36,190 --> 00:05:41,170
The very first time our components rendered or anything like that, we want to get ready to cancel the

97
00:05:41,170 --> 00:05:41,950
previous timer.

98
00:05:43,880 --> 00:05:47,510
All right, so now we've got a good idea of what that Clean-Up function is.

99
00:05:48,710 --> 00:05:50,630
I'm going to undo all the changes I just made.

100
00:05:50,810 --> 00:05:53,510
So I'm not going to delete my code.

101
00:05:54,320 --> 00:05:54,710
There we go.

102
00:05:54,770 --> 00:05:55,670
That's why I had before.

103
00:05:56,240 --> 00:05:57,410
Well, then take another pause.

104
00:05:57,470 --> 00:05:57,890
We come back.

105
00:05:57,920 --> 00:06:03,820
Next video, we're going to return a cleanup function from Musea fact that is going to cancel the previous

106
00:06:03,830 --> 00:06:04,230
time out.

107
00:06:04,410 --> 00:06:06,090
I.D. the quick pause.

108
00:06:06,170 --> 00:06:07,610
We'll take care of that in just a moment.