React Lifecycle Methods
In this post, I am going to explore the component lifecycle and some lifecycle methods of ReactJS.
There are different lifecycle methods that React provides at different phases of a component’s life. React automatically calls the responsible method according to the phase in which the component is. These methods give us better control over our component and we can manipulate them using these methods.
Let’s have a look into them.
Lifecycle diagram
Introduction to Lifecycle Methods
common lifecyclemethods: constructor() and render()!
constructor() is the first method called during the mounting phase. render() is called later during the mounting phase, to render the component for the first time, and during the updating phase, to re-render the component.constructor() only executes during the mounting phase, but render() executes during both the mounting and updating phase.
The component lifecycle has three high-level parts:
Mounting,
when the component is being initialized and put into the DOM for the first time
Updating,
when the component updates as a result of changed state or changed props
Unmounting,
when the component is being removed from the DOM
componentDidMount()
This method is called after the component gets mounted. Like componentWillMount, it is called once in a lifecycle. Before the execution of this method, the render method is called.
Have a look to understand these mounting methods:
ComponentDidUpdate()
We’ve looked at mounting (constructor(), render(), and componentDidMount()).
We’ve looked at unmounting (componentWillUnmount()). Let’s finish by looking at the updating phase.
An update is caused by changes to props or state. You’ve already seen this happen a bunch of times. Every time you’ve called setState() with new data, you’ve triggered an update. Every time you change the props passed to a component, you’ve caused it to update.
When a component updates, it calls several methods, but only two are commonly used.
The first is render(), which we’ve seen in every React component. When a component’s props or state changes, render() is called.
The second, which we haven’t seen yet, is componentDidUpdate().
Just like componentDidMount() is a good place for mount-phase setup, componentDidUpdate() is a good place for update-phase work.
here it could not update, without events
after assigning events componentDidUpdate() method will update..
import React from 'react';
class App extends React.Component{
constructor(){ super(); console.warn("Constructor"); this.state={ name:'code guruva' } }
componentDidUpdate(){ console.warn("Component DidUpdate.."); }
render(){ console.warn("render")
return( <div> <h1>Component DidMount Life Cycle </h1> <button onClick={
()=>{this.setState({name:"Trainer"})}
}> Update.... </button> </div> ); } }
export default App;
componentWillUnmount()
This method is called before the unmounting of the component takes place. Before the removal of the component, componentWillUnMount executes. This method denotes the end of the component’s lifecycle,
in this App.js component .., will assign some constructor to remove User component
