Instance v state variables in react.js

Question

In react.js, is it better to store a timeout reference as an instance variable (this.timeout) or a state variable (this.state.timeout)?

React.createClass({
     handleEnter: function () {
         // Open a new one after a delay
         var self = this;
         this.timeout = setTimeout(function () {
             self.openWidget();
         }, DELAY);
     },
     handleLeave: function () {
        // Clear the timeout for opening the widget
        clearTimeout(this.timeout); 
     }
    ...
})

or

React.createClass({
     handleEnter: function () {
         // Open a new one after a delay
         var self = this;
         this.state.timeout = setTimeout(function () {
             self.openWidget();
         }, DELAY);
     },
     handleLeave: function () {
        // Clear the timeout for opening the widget
        clearTimeout(this.state.timeout); 
     }
    ...
})

both of these approaches work. I just want to know the reasons for using one over the other.

From the documentation: "NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable." — Felix Kling
– Felix Kling, Commented Aug 8, 2014 at 16:12
Tip: Use React’s autobinding: this.timeout = setTimeout(this.openWidget, DELAY); — David Hellsing
– David Hellsing, Commented Aug 8, 2014 at 21:05

Ross Allen · Accepted Answer · 2017-10-05 18:12:02Z

176

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.

edited Oct 5, 2017 at 18:12

answered Aug 8, 2014 at 17:17

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brigand · Accepted Answer · 2014-08-08 20:50:46Z

12

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); 
     },
    ...
});

answered Aug 8, 2014 at 20:50

Brigand

86.4k20 gold badges167 silver badges174 bronze badges

Collectives™ on Stack Overflow

Instance v state variables in react.js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related