React Js is a Javascript library which is specially constructed for User Interface. The role of this react component is that it will implement a render() method which will process the input and produce the output as an interactive UI so whenever we change the data in components then the component will immediately render or update the DOM.
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
-
Initialization
-
Mounting
-
Updation of the component
-
Unmounting
Above are the phases of components we have in React.js.
1) Initialization
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,
this.state
And after placing the state value , we can able to replace the new value in state using the setState method.
2) Mounting
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,
- componentWillMount
- componentDidMount
componentWillMount
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,
Uses:
By using this method we can able to initialize the state and props.
componentDidMount
This componentDidmount hook method is the best place for initializing third-party Javascript libraries which requires access to the DOM and also for processing data operations. componentDidMount is also similar like the above method, it will be executed only once in the lifecycle but the only difference is that it will be executed only after the DOM element is rendered. Now this updated DOM will be available for application usage.
Uses:
Mostly here we can call all the API calls which will fetch the requested data from the back-end.
Best To Read: 11 Javascript Utility Libraries You Should Know In 2018
3) Updation
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,
-
shouldComponentUpdate
-
componentWillUpdate
-
componentDidUpdate
-
componentWillReceiveProps
shouldComponentUpdate
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.
Uses:
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.
componentWillUpdate
This will be executed only when the shouldComponentUpdate method returns the true value and it’s similar like componentWillMount.
Uses:
This method is used to mount the component when the states are updated or when the new props are received.
componentDidUpdate
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.
Uses:
Mostly used to recall the third party libraries and these third party libraries also will re-render and update based on the requirement.
componentWillReceiveProps
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
4) UnMounting
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,
componentWillUnmount
Uses:
It will help us to clean or remove the component. So this are methods used to render the component in DOM.
Was it helpful? similarly you can learn more blogs on our largest blog repository and do subscribe to receive all the updates on your inbox. For more inquires reach us at info@agiratech.com
