DEV Community

loading...
Cover image for How to use componentDidUpdate in React

How to use componentDidUpdate in React

cesareferrari profile image Cesare Ferrari ・1 min read

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.

Discussion (7)

pic
Editor guide
Collapse
joshmanton profile image
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.

Collapse
ibadeecodes profile image
Ibad Ullah Shaikh • Edited

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

Collapse
cesareferrari profile image
Cesare Ferrari Author

Thank you for the clarification.

Collapse
djsmacker01 profile image
Collapse
geraldryan profile image
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.

Collapse
sudhawan2 profile image
Sudhir.js • Edited

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

Collapse
asa1084 profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
asa108

ghjkl