7

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

frederj
  • 1,483
  • 9
  • 20
J Seabolt
  • 2,576
  • 5
  • 25
  • 57
  • 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? – Vicky Leong Mar 21 '19 at 12:10

5 Answers5

6

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.

Nathan Christian
  • 386
  • 1
  • 5
  • 5
    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. – J Seabolt Jun 22 '18 at 21:49
  • Wait, so you're getting a re-render with the new content visible but componentDidUpdate isn't fiiring? – Nathan Christian Jun 22 '18 at 21:50
  • 3
    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. – J Seabolt Jun 22 '18 at 21:52
  • I do not understand how a new render could be triggered without it calling componentDidUpdate – J Seabolt Jun 22 '18 at 21:53
  • 1
    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. – edencorbin Sep 21 '18 at 17:32
  • @edencorbin 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? – Yossi Dec 29 '18 at 10:52
  • 1
    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) – Apolo Apr 04 '19 at 10:23
  • 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 :) – frederj May 31 '19 at 01:07
  • 1
    I had a similar situation as @Apolo 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. – Amie Wilt Jun 27 '19 at 18:18
  • @AmieWilt I'm having the same issue. How did you fix it? – Omar Abid Jun 09 '21 at 13:08
  • @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? – Amie Wilt Jun 10 '21 at 17:19
  • @AmieWilt your comment should be converted to an answer. I was facing the same problem and it is 2023 now :D – mdanishs Jul 06 '23 at 03:46
3

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

halfer
  • 19,824
  • 17
  • 99
  • 186
ugrpla
  • 403
  • 3
  • 11
3

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

Antonios
  • 79
  • 4
  • 2
    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 – Apolo Apr 04 '19 at 10:24
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.

Nathan_
  • 31
  • 1
0

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.

Sankozi
  • 500
  • 5
  • 22