Instance v state variables in react.js
In addition to what @ssorallen said, you should also remember to handle the component unmounting before your handleLeave is called.
React.createClass({
handleEnter: function () {
// Open a new one after a delay
this._timeout = setTimeout(function () {
this.openWidget();
}.bind(this), DELAY);
},
handleLeave: function () {
// Clear the timeout for opening the widget
clearTimeout(this._timeout);
},
componentWillUnmount: function(){
// Clear the timeout when the component unmounts
clearTimeout(this._timeout);
},
...
});
I suggest storing it on the instance but not in its state
. Whenever state
is updated (which should only be done by setState
as suggested in a comment), React calls render
and makes any necessary changes to the real DOM.
Because the value of timeout
has no effect on the rendering of your component, it shouldn't live in state
. Putting it there would cause unnecessary calls to render
.