Menu
On each question component, I am trying to clear the time out. So on componentWillMount() I will start the timer and then on componentDidUpdate() I will clear the timeout. The timer does not seem to be working.After the timer expires I will push the user back to the home page. Any idea why the using clearTimeout() isnt working?
class Questions extends Component {
constructor(props){
super(props);
this.state ={
error: false,
position: null,
redirect: false
}
this.error = this.error.bind(this);
this.errorFalse = this.errorFalse.bind(this);
this.timer = this.timer.bind(this);
}
timer=()=>{
setTimeout(() => {
console.log('this ran')
this.setState({
redirect: true
})
}, 5000)
}
componentWillMount(){
this.setState({
error: false
})
this.timer();
}
componentDidUpdate(prevProps, prevState, snapshot, timer){
console.log('updated')
clearTimeout(this.timer);
}
930
To cancel a setTimeout() method from running, you need to use the clearTimeout() method, passing the ID value returned when you call the setTimeout() method.
How to use setTimeout in React. The setTimeout function accepts two arguments: the first is the callback function that we want to execute, and the second specifies the timeout in milliseconds before the function will be called. setTimeout(() => console. log('Initial timeout!'
Answer: Use the clearInterval() Method The setInterval() method returns an interval ID which uniquely identifies the interval. You can pass this interval ID to the global clearInterval() method to cancel or stop setInterval() call.
You only need to clear the timeout if you want the timer not to fire if it hasn't already fired. If it's already fired, or you don't care if it fires in the future, you don't need to cancel it.
React Hooks
useEffect(() => {
const timer = setTimeout(() => ...some work ... , 2000);
return () => {
clearTimeout(timer);
};
});
When you use setTimeout() it returns a timeoutID, which you use to clear the timeout.
To use it in your component, you need to store the timeoutID that was returned from the timer method:
class Questions extends Component {
constructor(props) {
super(props)
this.state = {
error: false,
position: null,
redirect: false
}
this.error = this.error.bind(this);
this.errorFalse = this.errorFalse.bind(this);
// this.timer = this.timer.bind(this); // don't bind an arrow function
}
timer = () => setTimeout(() => { // return the timeoutID
console.log('this ran')
this.setState({
redirect: true
})
}, 5000);
componentWillMount() {
this.setState({
error: false
})
this.timeoutID = this.timer(); // cache the timeoutID
}
componentDidUpdate(prevProps, prevState, snapshot, timer) {
console.log('updated')
clearTimeout(this.timeoutID); // clear the timeoutID
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
