Props updated, componentDidUpdate did not fire

Question

Is there ever a situation where componentDidUpdate would NOT fire, even if the props updated in React?

Insectarium

It seems like I'm in the same boat. My selector got fired -> mapStateToProps got fired -> component re-renders -> sub-components re-render -> DOM changed -> but NO didUpdate call. I don't think I mutate any state or redux state. Have you ever found the problem? – Scag

Answer 1

There are 3 conditions that can cause componentDidUpdate to not fire:

1) You wrote a custom shouldComponentUpdate that returned false.

2) The internal react methods determined that there was no change in the virtual DOM, so it chose not to re-render.

3) You extended something other than React.Component (such as PureComponent) which has a default shouldComponentUpdate method that returned false.

Corunna

I have a situation where the props in a container with mapStateToProps are updating, the props in the component are updating (just a string), the component is re-rendering.... and componentDidUpdate is just not going off. It doesn't seem to match any of these situations. Very, very strange. – Insectarium

Wait, so you're getting a re-render with the new content visible but componentDidUpdate isn't fiiring? – Corunna

I have a console.log inside the render function. I also have the prop in question console.logged right after. It re-renders. It has the new data. I can see it in both the container and from within the actual render function... but componentDidUpdate does nothing. It actually works in other contexts, but in this use case, it just sits there and does nothing as the component re-renders. – Insectarium

I do not understand how a new render could be triggered without it calling componentDidUpdate – Insectarium

Were experiencing the same issue with redux saga, we can trace the data mapped to props as updating in redux but the component does not call didcomponentupdate. – Zora

@Zora I also have a situation where componentDidUpdate although I see that props are changed (but, unlike what JSeabolt described, render is also not triggered). Is this what you experience? Did you find the reason? – Antilebanon

I had the same problem as you @JSeabolt. I noticed my component was unmounted and mounted again after each render. The problem was my mapStateToProps (redux-connect) function that was giving me a "key" props different with each render (it was not intended to be used as a React key attribute) – Ruvolo

I had a similar situation where all necessary props became available and the component re-rendered, but componentDidUpdate was never invoked. It turned out that there was a race condition where Redux state had not changed since initial component render, hence the component literally wasn't updating :) – Oneness

I had a similar situation as @Ruvolo where my component was unmounting and re-mounting and I didn't realize it, therefore the component was rendering as I expected but componentDidUpdate never fired. Might help to put some logs in the lifecycles to make sure it's clear what's actually happening. – Philologian

@AmieWilt I'm having the same issue. How did you fix it? – Fiertz

@OmarAbid it's been awhile since I posted this, I don't recall the issue I was having. can you send me a screenshot/sample/link to your code or provide some more explanation? – Philologian

@AmieWilt your comment should be converted to an answer. I was facing the same problem and it is 2023 now :D – Salesperson

Answer 2

this can also happen, if your component is in a list and the key of your component changes (ie. on every render) or the key is missing, or the key is duplicate, etc.

refer to docs for details: https://reactjs.org/docs/lists-and-keys.html

Indevout

The was my issue. My component was not in a list but by spreading a lot of properties into it I was mistakenly providing it a changing "key" attribute not intended to be a react key – Ruvolo

Answer 3

A common situation where this occurs is when multiple prop changes occur which don't effect anything in the virtual DOM.

For example you may wish to display a success message if an API returns 200 status code, with props that change like this:

API not called:

this.props.apiState == false

API called:

this.props.apiState == 'loading'

API successful:

this.props.apiState == 'success'

In this situation componentDidUpdate will only fire once, and if you console log this.props.apiState at the time it is fired you will see that it is loading. So any trigger in componentDidUpdate that is waiting on success will not occur.

ComponentWillReceiveProps deals with this issue in older versions of React, and in newer versions of React you can use shouldComponentUpdate to force an update when your desired prop change occurs.

Kingpin

Answer 4

You can suppress a render with returning false in shouldComponentUpdate(). So yes, in that case componentDidUpdate() won't fire.

Padegs

Answer 5

Nathan response is correct but it did not solve my problem when I searched for the same answers.

Sometimes it looks like props are updated but it is whole new component rendered with different props. Check componentDidMount (add console.log in it for example) to see what exactly happens.

Rochdale