update variable inside componentDidUpdate fails - react-native

Question

I'm having a popup in my view and inside the popup there's a countdown timer. I need to hide the popup when countdown timer has value1 . This is what I tried.
componentDidUpdate() {
if (this.state.count === 1) {
clearInterval(this.intervalDuration);
this.setState({popupvisible:false})
}
}
I'm getting an error when the count equals to 1 as follows.
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Answer 1

You have to add condition in componentDidUpdate,
The componentDidUpdate is particularly useful when an operation needs to happen after the DOM is updated
componentDidUpdate(prevProps) {
if (prevProps.data !== this.props.data) {
if (this.state.count === 1) {
clearInterval(this.intervalDuration);
this.setState({popupvisible:false})
}
}
}
You can learn more about componentDidUpdate on official document :
https://reactjs.org/docs/react-component.html#componentdidupdate

Answer 2

If you are setting a state variable, then that variable can also be added in condition to avoid recurring update.
componentDidUpdate() {
if (this.state.count === 1) {
clearInterval(this.intervalDuration);
if(this.state.popupvisible){
this.setState({popupvisible:false})}
}
}

Answer 3

This is happening because when count reaches the value 1 yourcomponentDidUpdate sets the state and since there is no check to control when to update your state based on popupVisible's value, your componentDidUpdate is called again and again causing an infinite loop. What you'd what to do is have a check if popupVisible is true, then only set it to false.
componentDidUpdate() {
if (this.state.count === 1) {
clearInterval(this.intervalDuration);
if(this.state.popupvisible) {
this.setState({ popupvisible:false });
}
}
}