Life Cycle Of React JS

Posted By : Anjali Bansal | 31-Dec-2018

React JS life cycle of Component

We have seen so far that the React Web App is actually a collection of independent components that run according to the interaction with them. Each react component has its own lifecycle, the lifecycle of a component can be defined as a series of methods that are planted at different stages of the existence of the component.

A React Component Have Four Stages Of Life:- Each component has many "lifecycle methods" that you can override to run the code at a specific time in the process. In the list below, commonly used lifecycle methods have been marked as bold. The rest of them are present for cases of relatively rare use.

(a).Initialization: This is the stage where the component is created with props provided and default position. It is done in the component class constructor.

	
				class Clock extends React.Component { 
    constructor(props) 
    {    
        // Calling the constructor of  
        // Parent Class React.Component 
        super(props);  
          
        // Setting the initial state 
        this.state = { date : new Date() };  
    } 
}

(b).Mounting: Mounting Stage to present JSX only by render Method.These methods are said in the following order when an example of a component is being made and inserted in the DOM:

1.constructor()
2.static getDerivedStateFromProps()
3.render()
4.componentDidMount()

(c).Updating: Updating is the state when the status of a component is updated and the application is rewritten.These methods are said in the following order when a component is being presented again:

1.static getDerivedStateFromProps()
2.shouldComponentUpdate()
3.render()
4.getSnapshotBeforeUpdate()
5.componentDidUpdate()

Example:-

componentWillRecieveProps(newProps)

{

    if (this.props !== newProps) { 

        console.log(" New Props have been assigned "); 

        // Use this.setState() to rerender the page. 

}

}

(d).Unmounting: This method is called when a component is being removed from the DOM:

1.componentWillUnmount()

(e).Error Handling:These methods are said at the time when there is an error during rendering in the form of a life pattern or the component of any child.

1.static getDerivedStateFromError()
2.componentDidCatch()

React provides developers with a set of predefined actions that occur around specific events during the lifetime of the present components.

The function of Each Stage of React Lifecycle:-

import React from 'react'; 
import ReactDOM from 'react-dom'; 
  
class Test extends React.Component { 
    constructor(props) 
    { 
        super(props); 
        this.state = { hello : "World!" }; 
    } 
  
    componentWillMount() 
    { 
        console.log("componentWillMount()"); 
    } 
  
    componentDidMount() 
    { 
        console.log("componentDidMount()"); 
    } 
  
    changeState() 
    { 
        this.setState({ hello : "Geek!" }); 
    } 
  
    render() 
    { 
        return ( 
            <div> 
            <h1>GeeksForGeeks.org, Hello{ this.state.hello }</h1> 
            <h2> 
             <a onClick={this.changeState.bind(this)}>Press Here!</a> 
            </h2> 
            </div>); 
    } 
  
    shouldComponentUpdate(nextProps, nextState) 
    { 
        console.log("shouldComponentUpdate()"); 
        return true; 
    } 
  
    componentWillUpdate() 
    { 
        console.log("componentWillUpdate()"); 
    } 
  
    componentDidUpdate() 
    { 
        console.log("componentDidUpdate()"); 
    } 
} 
  
ReactDOM.render( 
    <Test />, 
    document.getElementById('root'));