Hi and welcome to our tutorial on React native components.
In this video, we'll be discussing the differences
between functional and class based components and when to use each one.
First, let's start with functional components.
In React Native, functional components are
simply JavaScript functions that return a React element.
These components are easy to read
and understand and are great for simple tasks like rendering UI.
They do not have access to lifecycle
methods, but with the introduction of hook, they can now manage state.
Next, we have class-based components.
These components are created using class
syntax and they have access to lifecycle methods such as component did mount,
component did unmount or component did update.
These methods allow us to perform certain
actions at specific points in the components lifecycle.
Let's dive into coding now and see how
to use functional and class based components.
You now see my editor running, my simulator running and my Metro running
here so that we see the updates in the simulator.
And what I want to talk to you about is state
in React native. It refers to the data or variables
that determine a component's behavior and render information to the user.
It is used to keep track of user
interactions, manage the values of input fields, and respond to events.
State is considered to be a private and internal data structure
for a component and should not be directly accessed or modified by other components.
State is used to make a component dynamic
and responsive to user interactions and changing data.
So what I want to do now is use
the concept of states and Props in functional and class based components.
And now we're looking at a functional component.
I would like to show you how to change
a functional component to be a class based component
instead. The first thing that we're going to need to do is use React component.
So we're going to be importing it here and then we're going to change
the variable here and we're going to make it class based.
So we don't need a function here, we're going to make it class based.
We don't need the Handle text click function anymore.
And to see the same text here that we saw before for the class
based component, what we're going to have to do is use the Render method.
But before we do that, I almost forgot.
We need to extend this class
with the component that we just imported from React.
So now we're getting an error because we don't have the Render method here.
So let's use the Render method and it will return our component.
And if we save this, we see exactly what we saw before in our application.
So now what I want to do is show you how to use Props and State in this components.
For that we're going to need a constructor for this class.
And in this constructor we're going to use a method called super and we're going
to pass Props To It that Our Constructor Takes In.
This way, the variable props in the class
is going to be set and it's going to be accessible for us.
The next thing that we want to do
to manage state for the class based component is create the state
and we're just going to assign it to the empty object for now.
And then I'm going to show you how to use props in a class based component.
For this,
what we want to do is pass a prop to this component.
Let's go to the app file and pass a prop called the Name here.
And I'm just going to pass it my name, which is Nata.
Great. So now if we go to mytext components
and use this props name here instead of hello, react native world.
We're going to be seeing hello Nata. Great.
The state and the props are different things.
In react.
Native the state is managing the state of the components itself,
and it's not accessible by other components, as mentioned.
And the props is passed from a parent component to the child component.
So we technically could use the props here to create a new attribute in the state.
Let's say this attribute is called full name.
What we could dom here is use the props name that has been passed from the parent
component and then we could just concatenate my last name to this string.
And now to demonstrate that the value of this props name is different from this
state full name, what we're going to do is say hello, Nata
I know that your full name is
this state full name.
And here now we see a string saying hello, Nata.
I know that your full name is Nata Vacheishvili.
I hope this makes you understand
the difference between the useState and the props.
Now, I also want to talk about the fact
that class basic components come with something called lifecycle methods.
And these lifecycle methods are called during different states of the component.
So the first thing that I want to talk
about is component did mount lifecycle method
and this lifecycle method is called right after the component is rendered.
And this is usually used to perform some setup.
For example, fetching data from an API.
Let's Console log something from this and say that our component has been mounted.
Now, if we go to our terminal and press R key, that will reload our application.
We'll see a message here:
our component has been mounted. Great.
So this is how component did mount works.
The next method that I want to discuss with you is component did update.
And this method is usually called right
when the props or state of the application is changed.
We're going to see a demonstration here as well.
And let's say console log the props
or the state of the application has been changed.
Great.
To display this functionality.
What we could do here is instead of handle text click
that doesn't exist anymore,
we could create a function here that says that we're going to update our state.
So let's use this useState this is what
function is used to update the state and we're going to say that we are merging
the current state with an updated object value as well and we're going
to update our full name to be Nata V instead.
So let's save this.
And now, since this is an onpress event,
once I click on this, you're going to see that hello, Nata
I know that your full name is Nata V, and if we go to our terminal,
we're going to see that the state of the application has been changed.
And the component did update actually
comes with some arguments as well, which is previous props and previous state.
And if we were to see what the previous state was, we'll be able to see what our
previous state was and we can also see what our current state is.
Our application has rerendered again because I just saved my component and what
I'm going to do is I'm going to click on this and in the terminal we're going
to see the values of the previous state and the new state.
So our previous state was Nata Vacheishvili as a full name and our current state is Nata V
that we see on our simulator as well.
So this is how component did update lifecycle method works.
And then there is the last lifecycle
method that I think is important to mention here, which is component will
unmount and this is called right before the component is destroyed.
So let's say console log component is now being destroyed and now I want
to demonstrate how component will unmount works.
And for that what we're going to be doing is let's save this file and the component
will have to unmount in order to render the updated code.
So now we see a message here, the component is now being destroyed
and this is how the lifecycle methods in class based components work.
It is important to mention that all
of this can also be achieved using hooks in react native.
So let's convert this class based component back to functional component
and let's do the same thing that we did here for our functional component.
So we're not going to be needing the component extension anymore.
We can recreate our variable here and assign it to a function.
We're not going to need a constructor anymore but we could create the state.
So I'm just going to comment this out
for your visibility and I'm going to comment this out as well actually.
And we don't need the render method and we don't have this
set state method available here and we don't have this available here either.
And to access props in functional based components, we need to pass props here
and then we could use Props name or an alternative to this would be doing this.
We saw this in the previous lesson.
But for the demonstration purpose, I'm just going to be doing that.
Great.
Now the first thing that we want to do is useState in a functional component.
For this, you're literally going to be using a function called useState.
Let's import it here and we're going to create a set of variables here.
And the first variable we're going to call Full Name.
And the second variable is actually going to be a function that will help in setting
the full name's value or changing it set Full Name.
And then this is going to be equal to useState.
And here we can pass initial value.
So let's leave it empty.
And here we're going to be still seeing
that there's nothing written here even if we use the full name variable here.
If we were to write some kind of other
value such as like my last name, you would see my last name here.
But let's not do that for now. Okay.
So this dot state
created in the constructor was now replaced with this one line here.
So we don't need this anymore.
Now if we want to use component did mount in a similar way for the functional
components, what you would need is something called Use Effect.
Use Effect is a hook that allows you
to synchronize a component with an external system.
It takes two arguments, a callback function and a list of dependencies.
So you would use it like this use Effect,
a callback function and a list of dependencies.
It will call the callback function after the component is rendered and whenever one
of the dependencies change, the console log that we had here,
our component has been mounted, can be placed here.
But Use Effect can also be used to track the changes in our component.
So let's say we want to change the full
name and do something right after the full name has been changed.
This is what we use to track the changes of state or any other values that we are
going to place in dependencies for our components.
So technically what we could do here is just use this console log and say here
that the value of Full name has been changed.
And for unmounting we could use this Use Effects function again.
And we could use the return callback
which is going to be called right before our component is unmounted.
So we can just use this console log here.
And now we can just delete this comments code and make sure that we reset the value
of Full name here on click and we can say that my full name is Nata Vacheishvili.
Let's save this.
Let's open our terminal to track what's happening.
Great.
So our component has been mounted and the value of the full name has been changed.
And the reason it has been changed is
because we set the initial value for it already.
And then what we can do is click here.
Now we're going to see Nata Vacheishvili appear here because we set the full name.
We use this function here to change the full name's value.
And then what we could do is trigger the call of the component is now being
destroyed by simply changing our code and saving it.
So here you're going to see that our component was destroyed.
So this is it on class based and functional components.
I just wanted to demonstrate to you that you can choose in between class based
components and functional components as you please.
And you are able to achieve the same
things using hooks as lifecycle methods as well.
In conclusion, when deciding whether to use functional or class based
components, consider the complexity of your task.
If it's a simple UI rendering task, go for the functional components.
But if you need access to lifecycle
methods or have more complex logic, use a class based component.
It's also worth noting that while class based components have lifecycle methods,
the same functionality could be created using hooks in functional components.
Thanks for watching and see you in the next video.