WEBVTT

1
00:00:00.240 --> 00:00:03.580
Hi and welcome to our tutorial
on React native components.

2
00:00:03.600 --> 00:00:05.940
In this video,
we'll be discussing the differences

3
00:00:05.970 --> 00:00:10.220
between functional and class based
components and when to use each one.

4
00:00:10.250 --> 00:00:13.060
First, let's start with
functional components.

5
00:00:13.090 --> 00:00:15.380
In React Native, functional components are

6
00:00:15.410 --> 00:00:19.260
simply JavaScript functions
that return a React element.

7
00:00:19.290 --> 00:00:21.060
These components are easy to read

8
00:00:21.080 --> 00:00:25.660
and understand and are great
for simple tasks like rendering UI.

9
00:00:25.690 --> 00:00:27.660
They do not have access to lifecycle

10
00:00:27.690 --> 00:00:32.540
methods, but with the introduction
of hook, they can now manage state.

11
00:00:32.570 --> 00:00:35.180
Next, we have class-based components.

12
00:00:35.210 --> 00:00:37.740
These components are created using class

13
00:00:37.770 --> 00:00:42.380
syntax and they have access to lifecycle
methods such as component did mount,

14
00:00:42.410 --> 00:00:46.580
component did unmount or
component did update.

15
00:00:46.610 --> 00:00:48.820
These methods allow us to perform certain

16
00:00:48.850 --> 00:00:52.220
actions at specific points
in the components lifecycle.

17
00:00:52.250 --> 00:00:54.460
Let's dive into coding now and see how

18
00:00:54.490 --> 00:00:57.140
to use functional and class
based components.

19
00:00:57.170 --> 00:01:01.460
You now see my editor running,
my simulator running and my Metro running

20
00:01:01.490 --> 00:01:04.290
here so that we see
the updates in the simulator.

21
00:01:04.320 --> 00:01:07.490
And what I want to talk
to you about is state

22
00:01:07.520 --> 00:01:12.100
in React native.
It refers to the data or variables

23
00:01:12.130 --> 00:01:17.260
that determine a component's behavior
and render information to the user.

24
00:01:17.290 --> 00:01:19.130
It is used to keep track of user

25
00:01:19.160 --> 00:01:24.490
interactions, manage the values
of input fields, and respond to events.

26
00:01:24.520 --> 00:01:28.180
State is considered to be a private
and internal data structure

27
00:01:28.210 --> 00:01:33.780
for a component and should not be directly
accessed or modified by other components.

28
00:01:33.810 --> 00:01:36.340
State is used to make a component dynamic

29
00:01:36.370 --> 00:01:40.570
and responsive to user
interactions and changing data.

30
00:01:40.600 --> 00:01:43.210
So what I want to do now is use

31
00:01:43.240 --> 00:01:48.700
the concept of states and Props
in functional and class based components.

32
00:01:48.730 --> 00:01:52.020
And now we're looking
at a functional component.

33
00:01:52.050 --> 00:01:54.850
I would like to show you how to change

34
00:01:54.880 --> 00:01:58.820
a functional component to be
a class based component

35
00:01:58.850 --> 00:02:05.020
instead. The first thing that we're going
to need to do is use React component.

36
00:02:05.050 --> 00:02:08.780
So we're going to be importing it here
and then we're going to change

37
00:02:08.810 --> 00:02:12.450
the variable here and we're
going to make it class based.

38
00:02:12.480 --> 00:02:15.980
So we don't need a function here,
we're going to make it class based.

39
00:02:16.010 --> 00:02:20.780
We don't need the Handle
text click function anymore.

40
00:02:20.810 --> 00:02:26.890
And to see the same text
here that we saw before for the class

41
00:02:26.920 --> 00:02:31.220
based component, what we're going
to have to do is use the Render method.

42
00:02:31.250 --> 00:02:33.820
But before we do that, I almost forgot.

43
00:02:33.850 --> 00:02:36.170
We need to extend this class

44
00:02:36.200 --> 00:02:42.610
with the component that we
just imported from React.

45
00:02:42.640 --> 00:02:46.820
So now we're getting an error because
we don't have the Render method here.

46
00:02:46.850 --> 00:02:51.500
So let's use the Render method
and it will return our component.

47
00:02:51.530 --> 00:02:56.460
And if we save this, we see exactly
what we saw before in our application.

48
00:02:56.490 --> 00:03:03.700
So now what I want to do is show you how
to use Props and State in this components.

49
00:03:03.730 --> 00:03:08.140
For that we're going to need
a constructor for this class.

50
00:03:08.170 --> 00:03:12.560
And in this constructor we're going to use
a method called super and we're going

51
00:03:12.590 --> 00:03:16.460
to pass Props To It
that Our Constructor Takes In.

52
00:03:16.490 --> 00:03:19.420
This way, the variable props in the class

53
00:03:19.450 --> 00:03:23.300
is going to be set and it's
going to be accessible for us.

54
00:03:23.330 --> 00:03:25.060
The next thing that we want to do

55
00:03:25.090 --> 00:03:30.580
to manage state for the class based
component is create the state

56
00:03:30.610 --> 00:03:34.940
and we're just going to assign
it to the empty object for now.

57
00:03:34.970 --> 00:03:40.540
And then I'm going to show you how
to use props in a class based component.

58
00:03:40.570 --> 00:03:41.380
For this,

59
00:03:41.410 --> 00:03:46.260
what we want to do is pass
a prop to this component.

60
00:03:46.290 --> 00:03:50.700
Let's go to the app file and pass
a prop called the Name here.

61
00:03:50.730 --> 00:03:55.580
And I'm just going to pass it my name,
which is Nata.

62
00:03:55.610 --> 00:03:59.540
Great.
So now if we go to mytext components

63
00:03:59.570 --> 00:04:07.460
and use this props name here instead
of hello, react native world.

64
00:04:07.490 --> 00:04:11.100
We're going to be seeing hello Nata.
Great.

65
00:04:11.130 --> 00:04:13.900
The state and the props
are different things.

66
00:04:13.930 --> 00:04:14.610
In react.

67
00:04:14.640 --> 00:04:18.780
Native the state is managing the state
of the components itself,

68
00:04:18.800 --> 00:04:22.740
and it's not accessible by other
components, as mentioned.

69
00:04:22.770 --> 00:04:28.780
And the props is passed from a parent
component to the child component.

70
00:04:28.800 --> 00:04:36.740
So we technically could use the props here
to create a new attribute in the state.

71
00:04:36.770 --> 00:04:40.540
Let's say this attribute
is called full name.

72
00:04:40.570 --> 00:04:47.060
What we could dom here is use the props
name that has been passed from the parent

73
00:04:47.090 --> 00:04:54.180
component and then we could just
concatenate my last name to this string.

74
00:04:54.210 --> 00:05:01.100
And now to demonstrate that the value
of this props name is different from this

75
00:05:01.130 --> 00:05:06.420
state full name, what we're
going to do is say hello, Nata

76
00:05:06.450 --> 00:05:11.960
I know that your full name is

77
00:05:12.120 --> 00:05:17.420
this state full name.

78
00:05:17.450 --> 00:05:21.220
And here now we see a string
saying hello, Nata.

79
00:05:21.250 --> 00:05:24.460
I know that your full
name is Nata Vacheishvili.

80
00:05:24.480 --> 00:05:26.180
I hope this makes you understand

81
00:05:26.210 --> 00:05:29.740
the difference between
the useState and the props.

82
00:05:29.770 --> 00:05:32.020
Now, I also want to talk about the fact

83
00:05:32.040 --> 00:05:37.180
that class basic components come
with something called lifecycle methods.

84
00:05:37.210 --> 00:05:42.940
And these lifecycle methods are called
during different states of the component.

85
00:05:42.960 --> 00:05:44.680
So the first thing that I want to talk

86
00:05:44.710 --> 00:05:49.620
about is component did
mount lifecycle method

87
00:05:49.650 --> 00:05:57.540
and this lifecycle method is called
right after the component is rendered.

88
00:05:57.570 --> 00:06:02.140
And this is usually used
to perform some setup.

89
00:06:02.170 --> 00:06:07.020
For example, fetching data from an API.

90
00:06:07.040 --> 00:06:15.580
Let's Console log something from this and
say that our component has been mounted.

91
00:06:15.600 --> 00:06:22.780
Now, if we go to our terminal and press
R key, that will reload our application.

92
00:06:22.800 --> 00:06:24.500
We'll see a message here:

93
00:06:24.530 --> 00:06:27.580
our component has been mounted.
Great.

94
00:06:27.600 --> 00:06:31.860
So this is how component did mount works.

95
00:06:31.890 --> 00:06:38.260
The next method that I want to discuss
with you is component did update.

96
00:06:38.290 --> 00:06:41.540
And this method is usually called right

97
00:06:41.570 --> 00:06:46.400
when the props or state
of the application is changed.

98
00:06:54.320 --> 00:06:56.780
We're going to see
a demonstration here as well.

99
00:06:56.800 --> 00:07:01.260
And let's say console log the props

100
00:07:01.290 --> 00:07:07.100
or the state of the application
has been changed.

101
00:07:07.130 --> 00:07:08.540
Great.

102
00:07:08.570 --> 00:07:10.780
To display this functionality.

103
00:07:10.800 --> 00:07:13.820
What we could do here is
instead of handle text click

104
00:07:13.840 --> 00:07:15.180
that doesn't exist anymore,

105
00:07:15.210 --> 00:07:20.380
we could create a function here that says
that we're going to update our state.

106
00:07:20.410 --> 00:07:24.260
So let's use this useState this is what

107
00:07:24.290 --> 00:07:30.900
function is used to update the state
and we're going to say that we are merging

108
00:07:30.920 --> 00:07:38.400
the current state with an updated
object value as well and we're going

109
00:07:38.420 --> 00:07:46.540
to update our full name
to be Nata V instead.

110
00:07:46.570 --> 00:07:48.780
So let's save this.

111
00:07:48.800 --> 00:07:52.780
And now, since this is an onpress event,

112
00:07:52.800 --> 00:07:57.660
once I click on this,
you're going to see that hello, Nata

113
00:07:57.690 --> 00:08:06.660
I know that your full name is Nata V,
and if we go to our terminal,

114
00:08:06.690 --> 00:08:11.940
we're going to see that the state
of the application has been changed.

115
00:08:11.970 --> 00:08:14.940
And the component did update actually

116
00:08:14.970 --> 00:08:21.620
comes with some arguments as well, which
is previous props and previous state.

117
00:08:21.650 --> 00:08:28.540
And if we were to see what the previous
state was, we'll be able to see what our

118
00:08:28.570 --> 00:08:34.180
previous state was and we can also
see what our current state is.

119
00:08:34.200 --> 00:08:38.640
Our application has rerendered again
because I just saved my component and what

120
00:08:38.670 --> 00:08:44.680
I'm going to do is I'm going to click
on this and in the terminal we're going

121
00:08:44.700 --> 00:08:50.080
to see the values of the previous
state and the new state.

122
00:08:50.120 --> 00:09:00.140
So our previous state was Nata Vacheishvili
as a full name and our current state is Nata V

123
00:09:00.340 --> 00:09:04.260
that we see on our simulator as well.

124
00:09:04.290 --> 00:09:08.660
So this is how component did
update lifecycle method works.

125
00:09:08.690 --> 00:09:11.220
And then there is the last lifecycle

126
00:09:11.250 --> 00:09:15.100
method that I think is important
to mention here, which is component will

127
00:09:15.130 --> 00:09:19.420
unmount and this is called right
before the component is destroyed.

128
00:09:19.440 --> 00:09:26.580
So let's say console log component is now
being destroyed and now I want

129
00:09:26.610 --> 00:09:30.860
to demonstrate how component
will unmount works.

130
00:09:30.890 --> 00:09:36.240
And for that what we're going to be doing
is let's save this file and the component

131
00:09:36.270 --> 00:09:43.440
will have to unmount in order
to render the updated code.

132
00:09:45.440 --> 00:09:50.060
So now we see a message here,
the component is now being destroyed

133
00:09:50.080 --> 00:09:54.940
and this is how the lifecycle methods
in class based components work.

134
00:09:54.970 --> 00:09:57.700
It is important to mention that all

135
00:09:57.730 --> 00:10:02.380
of this can also be achieved
using hooks in react native.

136
00:10:02.410 --> 00:10:09.060
So let's convert this class based
component back to functional component

137
00:10:09.080 --> 00:10:14.660
and let's do the same thing that we
did here for our functional component.

138
00:10:14.690 --> 00:10:19.860
So we're not going to be needing
the component extension anymore.

139
00:10:19.890 --> 00:10:24.980
We can recreate our variable here
and assign it to a function.

140
00:10:25.010 --> 00:10:29.700
We're not going to need a constructor
anymore but we could create the state.

141
00:10:29.730 --> 00:10:32.060
So I'm just going to comment this out

142
00:10:32.080 --> 00:10:36.660
for your visibility and I'm going
to comment this out as well actually.

143
00:10:36.690 --> 00:10:43.260
And we don't need the render method
and we don't have this

144
00:10:43.290 --> 00:10:53.600
set state method available here and we
don't have this available here either.

145
00:10:59.120 --> 00:11:04.580
And to access props in functional based
components, we need to pass props here

146
00:11:04.610 --> 00:11:12.440
and then we could use Props name or an
alternative to this would be doing this.

147
00:11:13.240 --> 00:11:15.180
We saw this in the previous lesson.

148
00:11:15.210 --> 00:11:19.700
But for the demonstration purpose,
I'm just going to be doing that.

149
00:11:19.730 --> 00:11:20.620
Great.

150
00:11:20.650 --> 00:11:25.540
Now the first thing that we want to do
is useState in a functional component.

151
00:11:25.570 --> 00:11:31.620
For this, you're literally going to be
using a function called useState.

152
00:11:31.650 --> 00:11:37.820
Let's import it here and we're going
to create a set of variables here.

153
00:11:37.850 --> 00:11:41.660
And the first variable we're
going to call Full Name.

154
00:11:41.690 --> 00:11:47.580
And the second variable is actually going
to be a function that will help in setting

155
00:11:47.610 --> 00:11:54.940
the full name's value or
changing it set Full Name.

156
00:11:54.970 --> 00:11:59.700
And then this is going
to be equal to useState.

157
00:11:59.730 --> 00:12:02.380
And here we can pass initial value.

158
00:12:02.410 --> 00:12:04.900
So let's leave it empty.

159
00:12:04.930 --> 00:12:06.940
And here we're going to be still seeing

160
00:12:06.970 --> 00:12:14.220
that there's nothing written here even
if we use the full name variable here.

161
00:12:14.250 --> 00:12:16.260
If we were to write some kind of other

162
00:12:16.290 --> 00:12:20.180
value such as like my last name,
you would see my last name here.

163
00:12:20.210 --> 00:12:23.140
But let's not do that for now.
Okay.

164
00:12:23.170 --> 00:12:25.740
So this dot state

165
00:12:25.770 --> 00:12:31.340
created in the constructor was now
replaced with this one line here.

166
00:12:31.370 --> 00:12:33.900
So we don't need this anymore.

167
00:12:33.930 --> 00:12:39.980
Now if we want to use component did mount
in a similar way for the functional

168
00:12:40.010 --> 00:12:45.300
components, what you would need
is something called Use Effect.

169
00:12:45.330 --> 00:12:48.020
Use Effect is a hook that allows you

170
00:12:48.050 --> 00:12:51.780
to synchronize a component
with an external system.

171
00:12:51.810 --> 00:12:57.460
It takes two arguments, a callback
function and a list of dependencies.

172
00:12:57.490 --> 00:13:00.900
So you would use it like this use Effect,

173
00:13:00.930 --> 00:13:05.900
a callback function
and a list of dependencies.

174
00:13:05.930 --> 00:13:11.980
It will call the callback function after
the component is rendered and whenever one

175
00:13:12.010 --> 00:13:16.140
of the dependencies change,
the console log that we had here,

176
00:13:16.170 --> 00:13:20.380
our component has been mounted,
can be placed here.

177
00:13:20.410 --> 00:13:30.100
But Use Effect can also be used to track
the changes in our component.

178
00:13:30.130 --> 00:13:33.420
So let's say we want to change the full

179
00:13:33.450 --> 00:13:38.660
name and do something right after
the full name has been changed.

180
00:13:38.690 --> 00:13:45.080
This is what we use to track the changes
of state or any other values that we are

181
00:13:45.110 --> 00:13:48.180
going to place in dependencies
for our components.

182
00:13:48.210 --> 00:13:55.960
So technically what we could do here is
just use this console log and say here

183
00:13:57.880 --> 00:14:07.320
that the value of Full
name has been changed.

184
00:14:09.720 --> 00:14:14.900
And for unmounting we could use
this Use Effects function again.

185
00:14:14.930 --> 00:14:18.060
And we could use the return callback

186
00:14:18.080 --> 00:14:23.420
which is going to be called right
before our component is unmounted.

187
00:14:23.450 --> 00:14:27.460
So we can just use this console log here.

188
00:14:27.490 --> 00:14:34.980
And now we can just delete this comments
code and make sure that we reset the value

189
00:14:35.010 --> 00:14:44.620
of Full name here on click and we can say
that my full name is Nata Vacheishvili.

190
00:14:44.650 --> 00:14:46.620
Let's save this.

191
00:14:46.650 --> 00:14:50.300
Let's open our terminal
to track what's happening.

192
00:14:50.330 --> 00:14:51.180
Great.

193
00:14:51.210 --> 00:14:57.780
So our component has been mounted and the
value of the full name has been changed.

194
00:14:57.810 --> 00:14:59.940
And the reason it has been changed is

195
00:14:59.970 --> 00:15:04.420
because we set the initial
value for it already.

196
00:15:04.450 --> 00:15:08.260
And then what we can do is click here.

197
00:15:08.290 --> 00:15:13.380
Now we're going to see Nata Vacheishvili
appear here because we set the full name.

198
00:15:13.410 --> 00:15:17.940
We use this function here
to change the full name's value.

199
00:15:17.970 --> 00:15:25.660
And then what we could do is trigger
the call of the component is now being

200
00:15:25.690 --> 00:15:34.060
destroyed by simply changing
our code and saving it.

201
00:15:34.080 --> 00:15:38.660
So here you're going to see
that our component was destroyed.

202
00:15:38.690 --> 00:15:42.140
So this is it on class based
and functional components.

203
00:15:42.170 --> 00:15:48.060
I just wanted to demonstrate to you
that you can choose in between class based

204
00:15:48.080 --> 00:15:51.420
components and functional
components as you please.

205
00:15:51.450 --> 00:15:53.820
And you are able to achieve the same

206
00:15:53.850 --> 00:15:58.900
things using hooks as
lifecycle methods as well.

207
00:15:58.930 --> 00:16:02.820
In conclusion, when deciding whether
to use functional or class based

208
00:16:02.850 --> 00:16:06.140
components, consider
the complexity of your task.

209
00:16:06.170 --> 00:16:10.460
If it's a simple UI rendering task,
go for the functional components.

210
00:16:10.490 --> 00:16:12.420
But if you need access to lifecycle

211
00:16:12.450 --> 00:16:16.460
methods or have more complex logic,
use a class based component.

212
00:16:16.490 --> 00:16:20.700
It's also worth noting that while class
based components have lifecycle methods,

213
00:16:20.730 --> 00:16:25.220
the same functionality could be created
using hooks in functional components.

214
00:16:25.250 --> 00:16:28.040
Thanks for watching and see
you in the next video.