reactjs / react-timer-mixin

TimerMixin provides timer functions for executing code in the future that are safely cleaned up when the component unmounts

react-timer-mixin

Using bare setTimeout, setInterval, setImmediate and requestAnimationFrame calls is very dangerous because if you forget to cancel the request before the component is unmounted, you risk the callback throwing an exception.

If you include TimerMixin, then you can replace your calls to setTimeout(fn, 500) with this.setTimeout(fn, 500) (just prepend this.) and everything will be properly cleaned up for you.

Installation

Install the module directly from npm:

npm install react-timer-mixin

Example

var React = require('react');
var TimerMixin = require('react-timer-mixin');

var Component = React.createClass({
  mixins: [TimerMixin],
  componentDidMount() {
    this.setTimeout(
      () => { console.log('I do not leak!'); },
      500
    );
  }
});

react-timer-mixin's Issues

Requiring unknown module "react-timer-mixin".

Embed React Native inside Native Apps, install React Native by using CocoaPods. It works well, but when I add " var TimerMixin = require('react-timer-mixin'); ",it came out
Requiring unknown module "react-timer-mixin".

I exec�uted " npm install react-timer-mixin " ,but it didn't work.

how to done pause and reset using react-timer-mixin

hai i am using this module for pause and reset time but i am struggling that how to pause the timer,stop the timer,reset the timer, here i am attaching the image of the view

plaese help me how to done i used

TimerMixin.setTimeout(
      () => { console.log('I do not leak!'); },
      5000
    );

but timer not stop,help me that how to pause the timer

Is this project still useful ?

Is this project still useful.
it hasn't be updated in the last two year.

React 13.3 server error: cancelAnimationFrame is not defined

As the title says, I'm having problems using this with server rendering.
I'm not using the mixin on the server, just requiring it.

It throws:

 [ReferenceError: cancelAnimationFrame is not defined]

Not available on Bower

Why is this necessary?

Can't you just use a private variable on the component for your timers, and then use the lifecycle method, componentWillUnmount, to clear appropriate "timeouts" and "intervals"?

This mixin is uses more power than it needs to. This use case could be solved simply by using a documented & official lifecycle method.

Receiving a warning from TimerMixin after unmounting the component.

Appears not to work properly, perhaps because used as a @mixin() ?

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.
warning @ warning.js?8a56:44
getInternalInstanceReadyForUpdate @ ReactUpdateQueue.js?fd2c:45
ReactUpdateQueue.enqueueSetState @ ReactUpdateQueue.js?fd2c:192
ReactComponent.setState @ ReactComponent.js?702a:67
_handleDismiss @ AlertBanner.js?c408:195
(anonymous function) @ TimerMixin.js?fbdb:18
.

import { mixin } from 'core-decorators'
import TimerMixin from 'react-timer-mixin'

@mixin(TimerMixin)
class AlertBanner {
render () {
this._setupDismissTimer()
...
}
_setupDismissTimer () {
let theTimer = this._dismissTimer
if (this.state.autoDismiss
&& this._isShowing(this.state.transition)) {
if (!theTimer) {
theTimer = this.setTimeout(
this._handleDismiss
, TIMEOUT)
}
}
else {
this._clearDismissTimer()
}
this._dismissTimer = theTimer
}
@autoBind
_handleMouseEnter () {
this._clearDismissTimer()
}
@autoBind
_handleMouseLeave () {
this._setupDismissTimer()
}
_clearDismissTimer () {
const timer = this._dismissTimer
this._dismissTimer = void 0
if (timer) {
this.clearTimeout(timer)
}
}
}

I have to add this method to prevent an error, but I thought that was the point of this mixin to not have to clear any timers before we unmount.

componentWillUnmount() {
    this._clearDismissTimer()
}

clearImmediate may not implemented in some browser

Is this still needed if 15.3 is used?

thank you

Using this within React Native

Uncaught TypeError: Cannot read property 'apply' of undefined

Console:

File:

No other errors, just this comes time to time, somewhere setter is used incorrectly.

Shouldn't be advertised on react-native docs if it's not maintained anymore

See title please

Supporting TimerMixin for class syntax'd React components

Right now mixins are not supported in react component that follow es6 class syntax.

Should we be writing a timermixin that can be extended by a react component with class syntax or can we use the current mixin as a base class?

Remove Patent grant

Last year, Facebook actively dropped the patent grant from e.g. React. Unfortunately, this package still contains it, which raises the alarms we have set up.
Would it be possible to drop the patent grant?

[ES6] Provide Example

To be more consistent with the React Native docs is it possible to provide a ES6 Class syntax of this in the documentation?

https://facebook.github.io/react-native/docs/timers.html#timermixin