React Component Lifecycle - componentDidUpdate

The componentDidUpdate life-cycle method is the last life-cycle method invoked in the update phase. This method will be invoked after render() and can be used to operate on DOM after the component is updated. Similar to componentDidMount this method can be used to make Ajax/Api calls. Note that any change in the state/props due to the Ajax calls will re-trigger render(). We should make sure that any change to the state in this method is wrapped with proper conditions so as to avoid infinite loops.

If the getSnapshotBeforeUpdate life-cycle method is implemented in the component then the return value from getSnapshotBeforeUpdate will be passed as the 3rd parameter (snapshot) to this method. If getSnapshotBeforeUpdate is not implemented then the 3rd parameter will be undefined.

If the shouldComponentUpdate life-cycle method is implemented in the component and if it returns false then then componentDidUpdate will not be called.

Below is the syntax for componentDidUpdate

componentDidUpdate(prevProps, prevState) {
  if (condition to check prev props with current props) {
    // API/Ajax calls, will re-tirgger render()
  }
}