componentDidUpdate is firing constantly or never firing

componentdidupdate not called when props change
componentwillreceiveprops
componentdidupdate(prevprops same as current props)
componentdidupdate setstate
componentdidupdate not called redux
when is componentdidupdate called
componentdidupdate re-render
componentdidmount and componentdidupdate

So this is my code for component did update and this.props.getQuestions() is constantly firing. questions property is an array of questions which takes the values of the global state.

componentDidUpdate(prevProps){

        if(prevProps.questions !== this.props.questions){    
            this.props.getQuestions();
        }

    }

Connecting state to props

const mapStateToProps = state => ({
  questions: state.question.questions
});

When I try to compare the length of array between prevState and the current state, the method is never fired.

    componentDidUpdate(prevProps){

        if(prevProps.questions.length !== this.props.questions.length){    
            this.props.getQuestions();
        }

    }

How to make it work, so this method is fired only when the array is updated?

Your condition for fire was not right which you can see with your comparison of length of the array. You are checking for the equality of array's reference which is anyways incorrect(not sure how redux handles the prop update though).

You drill down to specificity of the questions in comparison and can compare questions' length, questions' questionId etc.. Loop through them and identify as desired.

You can even use library like lodash https://lodash.com/docs to compare array's and specific property.

clarify when componentDidUpdate fires. � Issue #2796 � facebook , componentDidUpdate (and componentDidMount) is always called after Update docs to indicate that componentDDidUpdate is fired after chang… … their own render, but the parent's componentDidUpdate() is never fired. I'd like to know this as well. In my case, I change state, render is called, my component and it's child component both invoke their own render, but the parent's componentDidUpdate() is never fired. So, does this only file if the real DOM actually changed, or does it fire post-render, whether or not the real dom changed?

If questions is the only property in mapStateToProps() you could just ensure you create a new array wherever you update it

newState.question.questions = [...updatedArray];

and remove the if statement from your componentDidUpdate entirely.

Make sure you do not update the questions array when calling getQuestions(), doing that can cause infinite loops where your didUpdate function causes an update (triggers didUpdate, ad infinitum)

componentDidUpdate inexplicably not firing after render in a single , Sometimes I'll get componentDidUpdate to fire, but inconsistently and it's never the final thing, a RENDER always shows up in my logs last,� Also, the markers are re-rendered/recreated every time a parent component is updated. (I say recreated because it seems like the markers are re-rendering without even firing shouldComponentUpdate or componentDidUpdate). Reproducible Demo (Paste the link to an example project and exact instructions to reproduce the issue.)

Simple array compare doesn't work. It will always match your condition ie. always not equal. And thus, componentDidUpdate fires constantly. Rather, you should check it like:

if(JSON.stringify(prevProps.questions) !== JSON.stringify(this.props.questions)){    
   this.props.getQuestions();
}

Regarding the checking with length property, it should work fine. But you stated that it isn't working. It seems you get same array when you use getQuestions. Check that function properly that it gets updated questions.

Post-Render with componentDidUpdate() � react-indepth, Once again, we can access the Native UI stack, interact with our refs and if required start another re-render/update. +. When componentDidUpdate() is called, two� Initial Server.js. In the App.js, I am using the useEffect() hook as a componentDidMount to fetch the back-end data in my mock server. Pay close attention that I have a second argument as [] in

ReactJS component lifecycle running too many times! (Camper , While using the lifecycle method componentDidUpdate() to call the API when toggling between brownie points, but when I put any function� From the moment your component is born - when it's initially being rendered - it enters the Mounting Phase. Once your component is living a happy life and is being updated it enters the Updating Phase. Finally when it's time to end it's life it enters the Unmounting Phase.

How does React componentDidUpdate work, React componentDidUpdate get's called after a React component props or state has componentDidUpdate is always the last lifecycle to get called for a React� Post-Render with componentDidUpdate(). Continuing the trend of corresponding methods, the componentDidUpdate() is the Update version of componentDidMount().Once again, we can access the Native UI stack, interact with our refs and if required start another re-render/update 1.

React/Redux: componentDidUpdate not firing consistently, React/Redux: componentDidUpdate not firing consistently - reactjs. props) but the DOM never updates, presumably because redux does not recognize a state� Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below. setState() will always lead to a re-render unless shouldComponentUpdate() returns false.

Comments
  • Good and quick workaround, but can we guarantee that props order won't change? Which would stringify differently and the comparison would fail
  • Yeah, the order will not change.