How to use componentDidUpdate in React

Update components based on comparison of previous and current state

We have seen how the componentDidMount() method is called on class components immediately after the component is mounted in the application and rendered.

componentDidMount() is part of the React component lifecycle methods, methods that get called automatically by the React system at specific points in the life of a component.
Another such methods is componentDidUpdate().

componentDidUpdate()is called after componentDidMount() and can be useful to perform some action when the state changes.
componentDidUpdate() takes as its first two arguments the previous props and the previous state.
Inside the method we can check if a condition is met and perform an action based on it.

For example, in the code below we check if the previous state and the current state are different. If they are, the console log statement will be run.

componentDidUpdate(prevProps, prevState) {
  if (prevState.pokemons !== this.state.pokemons) {
    console.log('pokemons state has changed.')
  }
}

When do we use componentDidUpdate()?

An example of when to use componentDidUpdate() is when we need to call an external API on condition that the previous state and the current state have changed.

The call to the API would be conditional to the state being changed. If there is no state change, no API is called.

Like mentioned before, to avoid an infinite loop, the API call needs to be inside a conditional statement.

Comments

[josh-manton]

It is not 100% correct to say that componentDidUpdate() is called after componentDidMount(). In the lifecycle of a Component, componentDidMount() is called in the Mounting phase. While componentDidUpdate() is called in the Updating phase.

If there is a state change in the Updating phase that will trigger componentDidUpdate().

This is an important distinction.

[Ibad Ullah Shaikh]

Highly agree!
I now got cleared about this concept while reading your comment..

[Cesare Ferrari]

Thank you for the clarification.

[Adewale Adedeji]

correct

[iftikhar hussain]

Absolutely right

[Gerald Ryan]

I'm still getting used to Javascript. It is different. For example, one says componentDidUpdate() takes two arguments, but to me it's more like it requires you to give names to two objects or things it's already providing, kind of like how in the Neverending Story Bastian just had to give the queen a name. She already existed. He didn't pass her in. Maybe it's like outparameters in C++. You set the parameter, and the values get overwritten. Is that right? These little java script peculiarities throw me for a loop as I try to learn how to code. Once I get a sense of them then I start to accelerate. I don't mean to be controversial.

[Sudhir.js]

Please check component did update is called every time when the state updates and it can be even with anything just a mouse enter on div can change the state ? PLease correct where im wrong.

What is use of this componentdidupdate after this render will be called

[Kz]

ComponentDidUpdate will be executed as long as the State had been updated.