WEBVTT

1
00:00:00.320 --> 00:00:04.690
Hi and welcome to this exciting tutorial
on lifecycle methods in React native.

2
00:00:04.720 --> 00:00:06.490
And if you're just starting out with class

3
00:00:06.520 --> 00:00:09.380
based components then this is
definitely a right place to be.

4
00:00:09.400 --> 00:00:11.220
Lifecycle methods are a set of methods

5
00:00:11.240 --> 00:00:15.220
provided by React native that allow you
to control and manage the behavior of your

6
00:00:15.250 --> 00:00:18.420
component at different
stages of its lifecycle.

7
00:00:18.440 --> 00:00:20.220
And they are used to perform specific

8
00:00:20.240 --> 00:00:25.540
actions at key points in the lifecycle
of component such as when the component is

9
00:00:25.570 --> 00:00:28.900
about to mount or when it
updates or when it unmounts.

10
00:00:28.920 --> 00:00:34.060
And some of the most used functionalities
and lifecycle methods are component did

11
00:00:34.090 --> 00:00:38.340
mount, should component update
get snapshot before update

12
00:00:38.370 --> 00:00:41.300
component did update
and component will unmount.

13
00:00:41.320 --> 00:00:44.940
And now we're going to see how we can use
these methods in a class based component.

14
00:00:44.970 --> 00:00:48.980
And we'll create a simple component
that console logs something for each

15
00:00:49.010 --> 00:00:54.740
lifecycle method so we can see when
each method is called and what it does.

16
00:00:54.770 --> 00:01:01.740
So let's create first of all
a component did mount method.

17
00:01:01.770 --> 00:01:08.620
And here we're just going to say
that components is mounted.

18
00:01:08.650 --> 00:01:11.130
Let's create should component update

19
00:01:11.160 --> 00:01:18.130
method that gives you next props, next
state and next context if there are any.

20
00:01:18.160 --> 00:01:23.900
Let's console log
checking if component should update.

21
00:01:23.930 --> 00:01:26.420
It has to return a value of true or false.

22
00:01:26.450 --> 00:01:29.490
So we're going to say
true it should update.

23
00:01:29.520 --> 00:01:31.340
We can prevent this at some point

24
00:01:31.370 --> 00:01:34.040
and check what the next prop
is or what next date is.

25
00:01:34.070 --> 00:01:37.460
And we're not going to rerender
our component if we don't need to.

26
00:01:37.490 --> 00:01:43.210
And then we can get the snapshot before
update so we can get what previous props

27
00:01:43.240 --> 00:01:47.290
were, what previous state was just in case
we want to do something with them.

28
00:01:47.320 --> 00:01:56.140
So we're going to say console log getting
snapshot before component updates

29
00:01:56.170 --> 00:01:58.640
and we have to return
something from here as well.

30
00:01:58.670 --> 00:02:02.240
So we're just going to return null

31
00:02:02.640 --> 00:02:09.660
and then what we need to do is console
log something for component did update.

32
00:02:09.690 --> 00:02:13.170
I'm just going to show you what
properties it has as well.

33
00:02:13.200 --> 00:02:15.980
My editor automatically gives it to me.

34
00:02:16.010 --> 00:02:24.340
So here we're just going to console
log component has updated.

35
00:02:24.370 --> 00:02:28.300
Let's save this
and then we're going to have the last one

36
00:02:28.330 --> 00:02:34.020
which is run before the components is
unmounted and that will be component will

37
00:02:34.050 --> 00:02:41.890
unmount and that's just going
to say component will unmount.

38
00:02:41.920 --> 00:02:46.780
Now we got to check our
terminal to see how this works.

39
00:02:46.810 --> 00:02:53.500
So let's rerun our application, reload
it and we see that component is mounted.

40
00:02:53.530 --> 00:02:56.060
So this function already did run.

41
00:02:56.090 --> 00:03:02.900
Now let's click on this here
and we're going to see that our component

42
00:03:02.930 --> 00:03:08.020
was checking if it should update because
it was about to update and then it got

43
00:03:08.050 --> 00:03:13.540
the snapshot before the component updated
and then the components did update.

44
00:03:13.560 --> 00:03:14.060
Great.

45
00:03:14.090 --> 00:03:18.180
And to see the unmounting
of the component, I don't know,

46
00:03:18.210 --> 00:03:20.780
this getting out of the app
doesn't really work.

47
00:03:20.810 --> 00:03:25.100
I don't know if reloading will
work now it really does not.

48
00:03:25.130 --> 00:03:28.660
We might have to have some kind
of navigation which we don't have here

49
00:03:28.690 --> 00:03:34.420
but basically when you go to a next page
or you change a component that's being

50
00:03:34.450 --> 00:03:42.660
rendered here then you would see the
components is unmounted message as well.

51
00:03:42.690 --> 00:03:44.880
So these are the simplest examples but you

52
00:03:44.910 --> 00:03:48.780
can use these methods to perform more
complex sections and interact with other

53
00:03:48.810 --> 00:03:53.300
parts of your app such as APIs,
stores or other components.

54
00:03:53.330 --> 00:03:57.960
So I hope you find this useful and thanks
for watching and have a great day.