stopping a timeout in 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);