1
00:00:00,600 --> 00:00:06,670
In this part we are going to talking about the life cycle which is updating.

2
00:00:06,870 --> 00:00:12,920
So it is the middle one the first step is to get revived Dave.

3
00:00:13,120 --> 00:00:23,480
Pop that we already explained that in the previous Natura so we can add this function to here and the

4
00:00:23,480 --> 00:00:31,730
next part is the should component update first component update is to let we know that if a component

5
00:00:31,760 --> 00:00:39,030
output is not affected by the current change in state or pulse of course the default behavior is to

6
00:00:39,030 --> 00:00:48,680
get into of course the default behavior is to render on ever each day change this method is invoked

7
00:00:48,780 --> 00:00:55,650
before rendering brand new pops or state of being received by the default value should be true.

8
00:00:55,720 --> 00:01:04,270
This method is rarely used it only exists as a performance optimization and so do not rely on event

9
00:01:04,300 --> 00:01:04,860
rendering.

10
00:01:05,400 --> 00:01:08,120
And this may cause a box.

11
00:01:08,170 --> 00:01:16,600
Now we are going to add this effort and we said that default value to be true first and then we go to

12
00:01:16,660 --> 00:01:22,960
this random method and which we already explained it in the previous that year or two.

13
00:01:22,990 --> 00:01:31,070
So now we can go to the next step is to get snapshot before update these scare naps all beef up day

14
00:01:31,110 --> 00:01:39,360
e a new life cycle method introduced in we add any value we'd heard by this life cycle will be past

15
00:01:39,360 --> 00:01:42,210
it as a perfect of two components update.

16
00:01:42,220 --> 00:01:44,920
And this is not very common.

17
00:01:45,040 --> 00:01:52,200
This method is used to handle some cases such as the scope position in a special way.

18
00:01:52,210 --> 00:02:00,640
Now we are going to add this method and we are going to return some snapshot here and to see whether

19
00:02:00,640 --> 00:02:05,450
it will also dissipate it into a component to update method.

20
00:02:05,470 --> 00:02:11,480
So the last thing is the component did update that we are set this life cycle method.

21
00:02:11,510 --> 00:02:15,130
It looked at as soon as the updating happens.

22
00:02:15,130 --> 00:02:22,930
The most common use case for the component the day is to update it bomb it responds to the Pops or state

23
00:02:22,930 --> 00:02:23,730
change.

24
00:02:23,740 --> 00:02:30,840
This is also a good place to do some extra GP we class as long as you compare with the current pops

25
00:02:30,850 --> 00:02:33,320
to the previous Pops.

26
00:02:33,430 --> 00:02:40,090
You can also fast stay here but remember to check the water state or pop change for the previous state

27
00:02:41,070 --> 00:02:45,100
the incorrect use offsets they can lead to an infinite loop.

28
00:02:45,130 --> 00:02:50,190
So now we add the component to update and we are also casting red.

29
00:02:50,330 --> 00:02:52,710
We will this paint a snapshot.

30
00:02:52,780 --> 00:02:58,630
This is the snapshot that we expect to dissipate it in the component update.

31
00:02:58,630 --> 00:03:04,640
Now we are going to try to build a great web so MTM everyone's build.

32
00:03:04,810 --> 00:03:13,660
Now as you can see this is the production build and you can see this is the original creation lifecycle

33
00:03:13,720 --> 00:03:20,980
which is the constructor for us and then the get derived date of J S and then you start rendering the

34
00:03:20,990 --> 00:03:21,810
empty.

35
00:03:22,180 --> 00:03:23,760
And by rendering the free cost.

36
00:03:23,980 --> 00:03:35,840
And it will and we have the G S competently Mond and as you can see there is no component to update

37
00:03:35,850 --> 00:03:39,960
here because we haven't update any changes in the color.

38
00:03:39,960 --> 00:03:51,880
So let's try to type some word to make some changes maybe with type 1 and then you can see that it should

39
00:03:51,880 --> 00:04:00,510
come with an update here and there is only one card change so days only one should component update

40
00:04:00,620 --> 00:04:02,340
displayed here.

41
00:04:02,620 --> 00:04:09,340
And as you can see the steps are already passed to the component it update and there is last thing that

42
00:04:09,340 --> 00:04:14,010
we haven't tried is to change this to force.

43
00:04:15,170 --> 00:04:23,530
Now we try to be able to get in now after we refresh the page and we try to update because we already

44
00:04:23,530 --> 00:04:27,330
set a should component update is false.

45
00:04:27,550 --> 00:04:32,510
So you can see even we type this can be updated.

46
00:04:32,650 --> 00:04:35,570
So this is how the should component update work.

47
00:04:35,590 --> 00:04:41,050
And also how do we add lifecycle of updating.