stopping a timeout in reactjs?

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.

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);

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