why componentDidUpdate run multiple times

reactjs react-lifecycle
Nguyen DN picture Nguyen DN · Nov 15, 2018 · Viewed 9.1k times · Source

I really don't understand the react life cycle. I run console.log in componentDidUpdate() and saw that it ran multiple times Console showed that componentDidUpdate ran 3 times

Answer

koo picture koo · Mar 1, 2019

Maybe I can give you an extra example when your issue happens since I cannot see your code.

componentDidUpdate(prevProps, prevState) {
        const { something } = this.props;
        if (prevProps.something !== something) this.apiCall();
        console.log('something')
}

when you change your state or props, componentDidUpdate is being invoked, and apiCall function makes http request via fetch or axios, and change the state twice using setState function.

whenever state gets changed, new render() is being invoked and componentDidUpdate follows.

but the condition 

if (prevProps.something !== something) this.apiCall();

may not be satisfied anymore, just console logging at this time instead of calling apiCall function which would trigger inifinite loop.

hope it helps.

Related questions

componentWillUnmount with React useEffect hook

How can the useEffect hook (or any other hook for that matter) be used to replicate componentWillUnmount? In a traditional class component I would do something like this: class Effect extends React.PureComponent { componentDidMount() { console.log("MOUNT", this.props); } componentWillUnmount() { …

Read More
Can't call setState (or forceUpdate) on an unmounted component

I'm trying to fetch the data from the server after component has been updated but I couldn't manage to do that. As far as I understand componentWillUnmount is called when component is about to be destroyed, but I never need …

Read More
ComponentDidMount not getting called after redux state update?

I think I'm missing a concept here about React and Redux. I'm trying to work with objects stored in redux, and I'm having trouble. REDUX: I have an action fetchItems, that gets all items from the database. This action works …

Read More