1
00:00:00,890 --> 00:00:02,820
Or app component is looking pretty good.

2
00:00:02,850 --> 00:00:08,210
But before we add any more features I want to do a little refactor to our app component.

3
00:00:08,460 --> 00:00:13,050
If you recall when we initialized our state property right here a couple of videos ago I had mentioned

4
00:00:13,050 --> 00:00:15,440
that there are two ways to initialize state.

5
00:00:15,570 --> 00:00:20,940
So I want to show you the other way that we can initialize state because the alternate way is a method

6
00:00:20,940 --> 00:00:25,250
that you're going to see very frequently in a lot of blog post documentation and whatnot.

7
00:00:25,410 --> 00:00:29,240
So one should be aware of these two different ways of initialising state.

8
00:00:29,400 --> 00:00:33,900
Now in order to understand this other way that we're going to initialize state we have to talk about

9
00:00:33,900 --> 00:00:36,840
something called lifecycle methods.

10
00:00:36,930 --> 00:00:41,760
We've kind of already been dealing on the fringes or of the edge of lifecycle methods without really

11
00:00:41,760 --> 00:00:43,090
defining what they work.

12
00:00:43,260 --> 00:00:49,110
So in this video we're going to start to talk about lifecycle methods then we'll start to refactor that

13
00:00:49,110 --> 00:00:50,820
state initialization right there.

14
00:00:50,820 --> 00:00:52,680
So let's get to it.

15
00:00:52,680 --> 00:00:53,530
All right.

16
00:00:53,670 --> 00:01:00,060
So a component lifecycle method is a function that we can optionally define inside of our class based

17
00:01:00,060 --> 00:01:03,600
components if we decide to implement these methods.

18
00:01:03,630 --> 00:01:09,700
They will be called automatically by react at certain points during a component's life cycle.

19
00:01:09,760 --> 00:01:14,340
And when I use the term lifecycle I'm referring to the fact that a component is going to be created

20
00:01:14,670 --> 00:01:19,410
and then show up in the DOM or show up on the screen of our browser and then at some point in time we

21
00:01:19,410 --> 00:01:25,290
might do something like say call set state which will cause the component to render and then in theory

22
00:01:25,290 --> 00:01:30,300
at some point in time a component might be removed from the DOM altogether and stop showing its content

23
00:01:30,330 --> 00:01:31,160
on the screen.

24
00:01:31,530 --> 00:01:36,220
That entire series of events is for two as the components life cycle.

25
00:01:36,240 --> 00:01:42,510
So these lifecycle methods are functions that are called during very distinct or discrete times during

26
00:01:42,510 --> 00:01:43,920
that cycle.

27
00:01:43,980 --> 00:01:49,410
We've already seen the constructor function that is a function that we can optionally define if we do

28
00:01:49,440 --> 00:01:54,030
it will be automatically called when a new instance of our component is created.

29
00:01:54,240 --> 00:02:00,270
And we've also spoken about the render method the render method is not optional which is unlike all

30
00:02:00,270 --> 00:02:01,290
the other methods on here.

31
00:02:01,290 --> 00:02:04,940
So the render method is the one function that we absolutely have to define.

32
00:02:04,950 --> 00:02:08,200
Now technically the render method is a lifecycle function.

33
00:02:08,220 --> 00:02:12,450
It gets called at some point during the lifecycle of a component.

34
00:02:12,870 --> 00:02:13,680
So here's what happens.

35
00:02:13,680 --> 00:02:18,870
We start off with the constructor being called then the render method will be called we return some

36
00:02:18,870 --> 00:02:23,000
amount of GSX and that content then becomes visible on the screen.

37
00:02:23,040 --> 00:02:27,900
After that we're going to see a series of different life cycle methods being called at different points

38
00:02:27,900 --> 00:02:28,520
in time.

39
00:02:29,820 --> 00:02:35,610
First off immediately after a component shows up on the screen of our browser a lifecycle method calls

40
00:02:35,640 --> 00:02:38,080
component did mount is called.

41
00:02:38,430 --> 00:02:45,000
So that means that if we define a function inside of our class like right here outside of the constructor

42
00:02:45,000 --> 00:02:46,470
right above the render method.

43
00:02:46,470 --> 00:02:53,010
If we define a method right here called very specifically component did MT like so this function will

44
00:02:53,010 --> 00:02:58,920
be automatically called one time when our component first gets rendered onto the screen.

45
00:02:58,920 --> 00:03:04,860
So we could put some amount of code inside of here to set up or do some initial data loading or a wide

46
00:03:04,860 --> 00:03:07,650
variety of different operations that we might want to do.

47
00:03:07,680 --> 00:03:12,840
One time when our component first shows up I'm going to remove that as one to give you a very quick

48
00:03:12,840 --> 00:03:13,590
example.

49
00:03:14,910 --> 00:03:19,980
After that component did mount method gets called our component essentially we'll sit around and wait

50
00:03:19,980 --> 00:03:25,580
for an update member an update is going to come in the form of calling that set state method anytime

51
00:03:25,620 --> 00:03:27,960
we call set state and update our state.

52
00:03:27,960 --> 00:03:32,190
The component will render itself or essentially update itself.

53
00:03:32,200 --> 00:03:38,290
Anytime that happens another lifecycle method is called component did update will be called automatically.

54
00:03:38,370 --> 00:03:44,160
And so once again if we decided we wanted to we could optionally define a function inside if you're

55
00:03:44,370 --> 00:03:46,630
called very specifically component.

56
00:03:46,680 --> 00:03:53,550
Did update if we defined that function it will be called automatically any time that our component updates

57
00:03:53,550 --> 00:03:54,350
itself.

58
00:03:54,710 --> 00:03:56,430
I'm going to leave that one again as well.

59
00:03:58,020 --> 00:04:02,730
Then after that our component might just sit around and wait until it gets another update.

60
00:04:02,850 --> 00:04:07,510
If it gets another update component to it update we'll be called a second time or third time fourth

61
00:04:07,510 --> 00:04:08,030
time.

62
00:04:08,070 --> 00:04:12,400
However many times our component gets updated at some point in time.

63
00:04:12,420 --> 00:04:16,080
We might decide to stop showing this component on the screen.

64
00:04:16,080 --> 00:04:20,820
We'll talk about the scenarios under which that would occur later on inside the course.

65
00:04:20,820 --> 00:04:25,650
So if for some reason we decide to no longer show this method we are asked to meet show this component

66
00:04:25,960 --> 00:04:32,070
the component will unmount method will be automatically called this method will be usually used if we

67
00:04:32,070 --> 00:04:34,550
want to do some kind of cleanup after our component.

68
00:04:34,560 --> 00:04:39,660
And of course We'll discuss when or what scenarios that would occur to get a better understanding of

69
00:04:39,660 --> 00:04:41,420
some of these different lifecycle methods.

70
00:04:41,430 --> 00:04:47,160
I want to implement component did mount and component did update inside of our component and just put

71
00:04:47,160 --> 00:04:52,410
some basic console logs inside there and just say OK yeah these things get automatically called at some

72
00:04:52,410 --> 00:04:53,910
point in time.

73
00:04:53,940 --> 00:05:01,780
So back inside my editor once again right above the render method I'm going to define component did

74
00:05:01,870 --> 00:05:03,820
mount like so.

75
00:05:03,820 --> 00:05:10,220
And inside if you are I'll put a simple console log that says my component will say my component was

76
00:05:10,220 --> 00:05:13,070
rendered to the screen will be really descriptive here.

77
00:05:15,960 --> 00:05:16,810
Like so.

78
00:05:17,060 --> 00:05:24,290
And then underneath that I'm going to define a second life cycle method component did update I'll put

79
00:05:24,290 --> 00:05:34,380
a council log inside of your that says my component was just updated it rerun if I can spell it for

80
00:05:34,390 --> 00:05:34,910
you render it.

81
00:05:34,910 --> 00:05:35,630
There we go.

82
00:05:36,570 --> 00:05:36,830
All right.

83
00:05:36,870 --> 00:05:41,040
Let's then save this and we'll flip back over to a browser and I just want to see these console logs

84
00:05:41,070 --> 00:05:42,650
appear.

85
00:05:42,680 --> 00:05:48,170
All right so I can flip back over and I got to make sure I port my console and we'll see that we already

86
00:05:48,170 --> 00:05:50,230
have the two console logs appear right here.

87
00:05:50,480 --> 00:05:53,410
So the first consul log is from the component.

88
00:05:53,420 --> 00:05:55,000
Did it mount lifecycle method.

89
00:05:55,130 --> 00:05:58,830
It's going to be called automatically any time our component shows up on the screen.

90
00:05:59,610 --> 00:06:03,150
We then saw the component did update method.

91
00:06:03,150 --> 00:06:08,880
It did update method was called because after our geolocation request succeeded or in this case was

92
00:06:08,880 --> 00:06:13,010
denied from me in particular are a component called Set state on itself.

93
00:06:13,050 --> 00:06:14,250
It rebranded itself.

94
00:06:14,340 --> 00:06:18,630
And so the component did update lifecycle method was invoked.

95
00:06:18,630 --> 00:06:23,010
Now one thing I want to mention really quickly here that I did not make tremendously clear on the diagram

96
00:06:23,580 --> 00:06:30,090
is that any time that component did update gets called right before it technically render will be called.

97
00:06:30,150 --> 00:06:35,160
So any time our computer updates the render method will be called will return some GSX that will be

98
00:06:35,250 --> 00:06:39,750
shown on the screen and then right after that component did update will be invoked.

99
00:06:39,750 --> 00:06:44,760
So in general as I mentioned previously the render method is going to be called many many many times.

100
00:06:44,880 --> 00:06:48,190
Anytime we decide to update our component.

101
00:06:48,250 --> 00:06:48,860
All right.

102
00:06:48,860 --> 00:06:53,870
So I'm going to remove those two lifecycle methods right there I just want to give you a quick demonstration.

103
00:06:53,930 --> 00:06:59,030
We are going to re-implement component did mount just a second but we will type that back in when we

104
00:06:59,030 --> 00:07:01,130
decide that we actually need it.

105
00:07:01,130 --> 00:07:02,590
Now let's take a quick pause right here.

106
00:07:02,600 --> 00:07:06,750
I want to very quickly tell you some of the different reasons that we might use these different lifecycle

107
00:07:06,800 --> 00:07:11,360
methods so that you at least have some context and understanding of why we care about these things at

108
00:07:11,360 --> 00:07:11,840
all.

109
00:07:11,870 --> 00:07:13,990
So quick pause and I'll see you in just a minute.