React JS - componentDidUpdate Life Cycle Method

componentDidUpdate() method is called after the component is updated.

It is called in Updating phase.

We can update state inside componentDidUpdate() method but must apply condition, otherwise it will run infinite loop.

Example 1 :

Output :

Example 2 - componentDidUpdate() with Parameters :

componentDidUpdate(prevProps, prevState, snapshot) method  contains three parameters :

• prevProps - Stores value of previous props.
• prevState - Stores value of previous state.
• snapshot - Default value of snapshot is undefined.

In the below example, on button click state is updating and inside componentDidUpdate() it is showing the value of previous state.

Output :

Interview Questions

• Can we call API inside componentDidUpdate() method ?
  Yes
  
  
• Which method is called first componentDidUpdate() or shouldComponentUpdate()?
  shouldComponentUpdate()