stopping a timeout in reactjs? - reactjs

Question

Is there a way I can kill/(get rid of) a timeout in reactjs?
setTimeout(function() {
//do something
}.bind(this), 3000);
Upon some sort of click or action, I want to be able to completely stop and end the timeout. Is there a way to do this? thanks.

Answer 1

Assuming this is happening inside a component, store the timeout id so it can be cancelled later. Otherwise, you'll need to store the id somewhere else it can be accessed from later, like an external store object.
this.timeout = setTimeout(function() {
// Do something
this.timeout = null
}.bind(this), 3000)
// ...elsewhere...
if (this.timeout) {
clearTimeout(this.timeout)
this.timeout = null
}
You'll probably also want to make sure any pending timeout gets cancelled in componentWillUnmount() too:
componentWillUnmount: function() {
if (this.timeout) {
clearTimeout(this.timeout)
}
}
If you have some UI which depends on whether or not a timeout is pending, you'll want to store the id in the appropriate component's state instead.

Answer 2

Since React mixins are now deprecated, here's an example of a higher order component that wraps another component to give the same functionality as described in the accepted answer. It neatly cleans up any remaining timeouts on unmount, and gives the child component an API to manage this via props.
This uses ES6 classes and component composition which is the recommended way to replace mixins in 2017.
In Timeout.jsx
import React, { Component } from 'react';
const Timeout = Composition => class _Timeout extends Component {
constructor(props) {
super(props);
}
componentWillMount () {
this.timeouts = [];
}
setTimeout () {
this.timeouts.push(setTimeout.apply(null, arguments));
}
clearTimeouts () {
this.timeouts.forEach(clearTimeout);
}
componentWillUnmount () {
this.clearTimeouts();
}
render () {
const { timeouts, setTimeout, clearTimeouts } = this;
return <Composition
timeouts={timeouts}
setTimeout={setTimeout}
clearTimeouts={clearTimeouts}
{ ...this.props } />
}
}
export default Timeout;
In MyComponent.jsx
import React, { Component } from 'react';
import Timeout from './Timeout';
class MyComponent extends Component {
constructor(props) {
super(props)
}
componentDidMount () {
// You can access methods of Timeout as they
// were passed down as props.
this.props.setTimeout(() => {
console.log("Hey! I'm timing out!")
}, 1000)
}
render () {
return <span>Hello, world!</span>
}
}
// Pass your component to Timeout to create the magic.
export default Timeout(MyComponent);

Answer 3

You should use mixins:
// file: mixins/settimeout.js:
var SetTimeoutMixin = {
componentWillMount: function() {
this.timeouts = [];
},
setTimeout: function() {
this.timeouts.push(setTimeout.apply(null, arguments));
},
clearTimeouts: function() {
this.timeouts.forEach(clearTimeout);
},
componentWillUnmount: function() {
this.clearTimeouts();
}
};
export default SetTimeoutMixin;
...and in your component:
// sampleComponent.js:
import SetTimeoutMixin from 'mixins/settimeout';
var SampleComponent = React.createClass({
//mixins:
mixins: [SetTimeoutMixin],
// sample usage
componentWillReceiveProps: function(newProps) {
if (newProps.myValue != this.props.myValue) {
this.clearTimeouts();
this.setTimeout(function(){ console.log('do something'); }, 2000);
}
},
}
export default SampleComponent;
More info: https://facebook.github.io/react/docs/reusable-components.html

Answer 4

I stopped a setTimeout in my react app with Javascript only:
(my use case was to auto-save only after a clear 3 seconds of no keystrokes)
timeout;
handleUpdate(input:any) {
this.setState({ title: input.value }, () => {
clearTimeout(this.timeout);
this.timeout = setTimeout(() => this.saveChanges(), 3000);
});
}