Initializing: Inserting elements to DOM

constructor()/constructor(props)

constructor(props) is called when the component gets initialized. You can set an initial component state and bind class methods during that lifecycle method.

constructor(props) {

    super(props);

    this.state = {employeeName: "Manu Manjunatha"};

}

Mounting: Inserting elements to DOM

static getDerivedStateFromProps()

This is called before the render() lifecycle method, both on the initial mount and on the subsequent updates. This is the natural place to set the state object based on the initial props. It should return an object to update the state, or null to update nothing.  It is important to know that this is a static method and it doesn’t have access to the component instance.

static getDerivedStateFromProps(props, state) {

    return { employeeName: props.employeeName };

}

render()

render() function should return JSX to render it on browsers. It is a mandatory lifecycle method that returns JSX to render it on browsers.

componentDidMount()

The componentDidMount() method is called after the component is rendered. This is used to update the DOM which is already placed in the DOM. That’s the perfect time to do an asynchronous request to fetch data from an API. The fetched data is stored in the local component state to display it in the render() lifecycle method.

componentDidMount() {

    setTimeout(() => {

      this.setState({employeeName: "Aashvith"})

    }, 1000)

}

Updating: By updating component's state or props

getDerivedStateFromProps()

Along with mounting phase, it is called on the subsequent updates.

shouldComponentUpdate()

It is always called when the component updates due to state or props changes. This method can return a Boolean value that specifies whether React should continue with the rendering or not. The default value is true. Depending on a boolean that you return from this lifecycle method, the component and all its children will render or will not render on an update lifecycle. You can prevent the render lifecycle method of a component.

shouldComponentUpdate() {

         if(user == "employee"){

                 return true;

         } else {

                 return false;

         }

}

render()

It is called to re-render the updated component.

getSnapshotBeforeUpdate()

It is a lifecycle method, invoked before the most recently rendered output is committed to the DOM. From this method you have access to the props and state before the update, meaning that even after the update, you can check what the values were before the update. If the getSnapshotBeforeUpdate() method is present, you should also include the componentDidUpdate() method, otherwise you will get an error.

getSnapshotBeforeUpdate(prevProps, prevState) {

}

componentDidUpdate()

It is a lifecycle method that is invoked immediately after updating, but not for the initial render. You can use it as to perform DOM operations or to perform more asynchronous requests. If your component implements the getSnapshotBeforeUpdate() method, the value it returns will be received as the snapshot parameter.

componentDidUpdate() {

}

Unmounting: Component is removed from the DOM

componentWillUnmount()

It is called before you destroy your component, Meaning removed from the DOM. You can use this lifecycle method to perform any clean up tasks.

componentWillUnmount() {

    alert("Your component is unmounted.");

}