Hi and welcome to this exciting tutorial on lifecycle methods in React native.
And if you're just starting out with class
based components then this is definitely a right place to be.
Lifecycle methods are a set of methods
provided by React native that allow you to control and manage the behavior of your
component at different stages of its lifecycle.
And they are used to perform specific
actions at key points in the lifecycle of component such as when the component is
about to mount or when it updates or when it unmounts.
And some of the most used functionalities and lifecycle methods are component did
mount, should component update get snapshot before update
component did update and component will unmount.
And now we're going to see how we can use these methods in a class based component.
And we'll create a simple component that console logs something for each
lifecycle method so we can see when each method is called and what it does.
So let's create first of all a component did mount method.
And here we're just going to say that components is mounted.
Let's create should component update
method that gives you next props, next state and next context if there are any.
Let's console log checking if component should update.
It has to return a value of true or false.
So we're going to say true it should update.
We can prevent this at some point
and check what the next prop is or what next date is.
And we're not going to rerender our component if we don't need to.
And then we can get the snapshot before update so we can get what previous props
were, what previous state was just in case we want to do something with them.
So we're going to say console log getting snapshot before component updates
and we have to return something from here as well.
So we're just going to return null
and then what we need to do is console log something for component did update.
I'm just going to show you what properties it has as well.
My editor automatically gives it to me.
So here we're just going to console log component has updated.
Let's save this and then we're going to have the last one
which is run before the components is unmounted and that will be component will
unmount and that's just going to say component will unmount.
Now we got to check our terminal to see how this works.
So let's rerun our application, reload it and we see that component is mounted.
So this function already did run.
Now let's click on this here and we're going to see that our component
was checking if it should update because it was about to update and then it got
the snapshot before the component updated and then the components did update.
Great.
And to see the unmounting of the component, I don't know,
this getting out of the app doesn't really work.
I don't know if reloading will work now it really does not.
We might have to have some kind of navigation which we don't have here
but basically when you go to a next page or you change a component that's being
rendered here then you would see the components is unmounted message as well.
So these are the simplest examples but you
can use these methods to perform more complex sections and interact with other
parts of your app such as APIs, stores or other components.
So I hope you find this useful and thanks for watching and have a great day.