React Lifecycle
Every React Component has its own lifecycle, react lifecycle can be described as a chain of the methods that are strategies in different phases of the component’s existence. The description is very pretty understood, but what is the meaning of different phases? As for humans we get different phases like child, adult, elderly. For React Component we have:-
-
Initialization
-
Mounting
-
Updating
-
Unmounting
React gives the developer a lot of built-in functions that if specific events are called on around specified events in the lifetime of the component. Developers can overrule the functionality with the logic which they wish for and execute accordingly.
Initialization
This is the first phase of the React Lifecycle in which the component is constructed with initial props and initial state given under the scope of the constructor. The Initialization method is called before the component is mounted to the Dom.
In the above code, we are setting the initial state of the component.
Mounting
This is the phase of rendering the JSX returned by the render method basically when the initialization phase is completed and now the component is mounted and rendered on the web page for the first time. React obeys the default procedure in the NAMING PROTOCOL of this predefined function and the function contains “Will” which speaks to before some particular stage and "Did" speaks to after the finishing of that stage. Mounting phase contains two predefined functions:
-
componentWillMount():
This function is used to initialise the state, you can use this instead of having a constructor to do so. This function is executed for the first time right before the render() function i.e right before the component is mounted on the DOM.
-
componentDidMount():
This function is executed right after the render function () i.e right after the component is mounted on the DOM.
For eg : You may want to render the content of the modal within a specific DOM element.
Updating
React is a JavaScript library which helps to create dynamic web pages easily, so these web pages must behave according to the user. This is how the Updating phase is related to this.The updating phase of the React Component Lifecycle is used whenever changes are made to the State or Props of a react component, the component re-rendered simply, the component is updated. Updating phase predefined functions.
-
componentwillreceiveprops():
This function is a Props exclusive and independent of states. The function is called on before a mounted component andProps gets reassigned.
-
setState():
Exactly it’s not a lifecycle function, can be called at any instant. This is use to update the state of the component.
-
shouldComponentUpdate():
Naturally, every state or props update re-render the page however this may not generally be the ideal outcome, now and then it is wanted that on refreshing the page won't be repainted. The shouldComponentUpdate() Function satisfies the need by letting React know whether the component will be influenced by the update or not. shouldComponentUpdate() is called before rendering a previously mounted component when new props or state are being obtained. Whenever returned false then the resulting steps of rendering won't be completed. Then the Function takes the new Props and new State as the new arguments/input and returns whether it is necessary to re-render or not.
-
componentWillUpdate() :
This function is called on before the component is re-rendered i.e it gets called once before the render() function is executed after the state and props gets updated.
-
componentDidUpdate():
This function is called on before the component is re-rendered i.e it gets called once before the render() function is executed after the state and props gets updated.
Unmounting
Unmounting is the final phase of the lifecycle, in this we unmount the component from the DOM.
-
componentWillUnmount():
componentWillUnmount called before the component is unmounted from the DOM which means it is called once right before when the component is about to vanish from the web page and this indicates the end of the cycle.
Conclusion
It's been a long talk regarding the matter of lifecycle methods in React. I trust you see how these methods work somewhat more naturally now.
Nicely explained
Leave a Reply
Easy to understand . Good work
Leave a Reply
Very helpful as everything is clearly stated and explained.
Leave a Reply
Very well explained, Content is really good and helpful.
Leave a Reply
This was very helpful.. Just what I needed. Great work :)
Leave a Reply
The details are really good and efficient to read and learn ! Great work ! Keep it coming !
Leave a Reply
Very brilliantly presented and easy to get knowledge from, looking forward for more content
Leave a Reply
The describes details and efficient working is good enough to make it up to a deep understanding . Good job !
Leave a Reply