In this article, we are going to understand the whole lifecycle meaning and learn all of its methods and get deep into it.
What is the meaning of lifecycle?
let’s begin this example with you,
you live a life in a cycle which is the same life cycle that we talking about.
before you are born, probably your name, your religion have chosen and your parent's name and many things are specified(initialization), in next phase you are born(mounting), next phase is to growing up and changing (updating) and the last phase ends up with death(Unmounting).
this was a clear example about the lifecycle and its phases which is the same in all lifecycles whether it is an animal or human or plant or React component.
now let’s explain these phases in react components.
1.initialization :
in this phase, we initialize all states and props for the component( just like we choose a name and other things for a baby which is gonna born).
2. mounting :
in this phase, render gets executed and component mounts(just like a baby is born).
3.updating :
in this phase props and states have a straight affect on the component which causes them to update. but how?!
if I throw a stone at your face what would happen?!
because your face hasn’t been injured, it is now, thus you are changed and this is called updating.
now if I throw the same stone with the same power to the same part of your face it wouldn’t change anything in you because you already have that wound.
for the last time if I throw another stone at your face but this time the stone shape is different and power is more than the last time, it would injure your face bigger than the last time and you have changed again because the stone is changed. (I hope not to kill you till the end of the article😂 ).
now if we look at it this way that you are a component and the stone is a prop which thrown to the component, you can guess how the component changes ( whenever prop or state get changed component should be updated and otherwise it shouldn’t).
4. Unmounting :
in this phase, the component comes to its end and gets removed from the screen.
you can guess the example of it in real life.
What are the methods of these phases and how do they work?
1. initialization hasn’t many things except constructor and super and setState
2. mounting :
ComponentWillMount()
This method was invoked just before the initial render and that’s it.
Attention: this method deprecated since 2018 and you can use it in versions before 17 and after that you can use this method with UNSAFE_componentWillMount
(which is not recommended) or alternatives which I will talk about in a second.
but why deprecated? : react realized that if we want to do asynchronous things like fetching data in this method it would cause a problem between this method and render method and if you read my last article about asynchronous handling of js
you can guess why it happens…
because componentWillmount should get executed first and then render, but the render method should also get executed before the asynchronous function inside componentWillMount and this is a problem, right?
now, what are alternatives for it? :
componentDidMount() is a good alternative for asynchronous and for synchronous things constructor should be fine.
componentDidMount()
This method was invoked just after the initial render and that’s it. (when I say render, I mean component show up on the screen).
in this method, you can do asynchronous things like data fetching as I mentioned above.
these two methods are only prime methods of this phase.
3.updating:
shouldComponentUpdate()
This method is invoked before re-rendering(when its states or props get changed) and doesn’t get executed at initial rendering.
do you remember when I was talking about throwing a stone at your face for updating example(how can you forget😂)anyway, in that example something differs from react component and that is :
if we give the same prop to the component it would be re-rendered again! Do you know why?
because shouldComponentUpdate() returns true as default every time component receives prop, it doesn’t matter if props have not changed at all.
but when we return (newProps.value !== this.props.value) inside this method, it won’t give us true every time, and the component just gets re-rendered whenever props have changed.
Attention: if it returns false, render() and componentDidUpdate() and componentWillUpdate() , won’t get executed.
componentWillUpdate()
This method is invoked before re-rendering, after shouldComponentMount (when its states or props get changed), and doesn’t get executed at initial rendering.
inside this method, you can manipulate the current component before it gets updated or read information from DOM like scroll position.
Attention: this method deprecated after version 16.6 released and you can use UNSAFE_componentWillUpdate (which is not recommended) or alternatives which I talk about in a second.
but why was this method deprecated? :
after version 16.6, react came up with new stuff that one of them was suspense which makes component render method asynchronous ! and it is called lazy component and it is good for performance but…
converting the synchronous render method to asynchronous, cause delay, and delay cause the problem with componentWillUpdate.
what are its alternatives?
componentDidUpdate() and getSnapshotBeforeUpdate() is the alternatives which I’ll talk about them.
getSnapshotBeforeUpdate()
This method was invoked right before the most recently rendered.
in this method, we can get and return some information from the DOM for example scroll position before it is changed and the returned value will pass to componentDidUpdate() as a parameter.
componentDidUpdate()
This method is invoked just after every re-render.
as you can see the third parameter is the returned value from getSnapshotBeforeUpdate().
4. Unmounting
componentWillunmount()
This is the only prime method for this phase and invoked just before a component unmounts and gets removed from the screen.
you can perform any cleanup in this method like invalidating timers, canceling network requests, etc…
let’s look at the lifecycle methods flowchart to end this article.
That’s it, my friend, now you can rest without any stone throwing at your face.😁
I hope you learned something from this article although with functional components and hooks we rarely use lifecycle methods nowadays and I will talk about them in the future.
goodbye and good luck. 🤞
Top comments (0)