Every UI component will have it’s own birth and death as like we humans have. Similarly, Reactjs also has it’s own lifecycle but it follows the different phases. Let’s look into the complete ReactJs Component lifecycle methods we have in ReactJs,
Phase of Components
Updation of the component
Above are the phases of components we have in React.js.
The constructor is one of the best OOP concept used especially when the new object is created and this component will automatically call the constructor by default. So, in this constructor we can define the super function to extend our class from parent class.
Constructor is the first method in the component rendering process and in react, the constructor is called before it goes to the mounting process. This is the reason why we should access “this.props” which is initially called as “super function” in constructor and this is the place where you can set the default props and states. Also, here’s where you can assign the state directly as mentioned below,
And after placing the state value , we can able to replace the new value in state using the setState method.
After setting the states and props in constructor, the react component will be ready to mount in the web browser DOM and this phase contains the methods which we use for both before and after mounting.
Those methods are,
This hook method executes only once in the life cycle of the component that too before the DOM is rendered. And it will not have much difference compared to the constructor. So In this phase, we can define all the function before mounting the process,
By using this method we can able to initialize the state and props.
Mostly here we can call all the API calls which will fetch the requested data from the back-end.
On updation process, React component will update the DOM when it receives the new states and props. Here we have two ways to update the component, one is by sending new props, and other way is by updating the states.
Here are those hook methods used in updation,
This method will update the values of the states and props with the newly updated value. This will help us to decide whether we should re-render the component or not. Finally, after processing everything, this method will return true or false values only based on the result of the DOM by checking whether its re-rendered or not. However, In most of the cases, this method will return the true value.
It will help us to update the component values and also allow us to re-render the component just by changing the status in our application.
This will be executed only when the shouldComponentUpdate method returns the true value and it’s similar like componentWillMount.
This method is used to mount the component when the states are updated or when the new props are received.
This method is similar like componentDidMount and it will be executed after the componentWillUpdate method. And this newly updated component is used to render the DOM in the web page.
Mostly used to recall the third party libraries and these third party libraries also will re-render and update based on the requirement.
This method executes when the new props is changed and this will not executes the first render i meant the initial rendering. This enables the component to update the state depending on the existing and upcoming props which are called as prevProps, nextProps.
Best To Read: 12 Best Golang Practices We Must Follow
Finally we reached to the die phase, i mean we reached to the last phase of the component and as the headline says, here all the components will be unmounted from the DOM.
Below method is used to unmount,
It will help us to clean or remove the component. So this are methods used to render the component in DOM.