ReactJS: Initializing instance variable in component's getInitialState?

Question

Is initializing component's instance variable in getInitialState relevant?

For example:

var Chat = React.createClass({

  getInitialState: function() {

    this.messages = []; // Instance variable initialization - EDIT: better as state variable?

    this.scrollToBottom = false; // EDIT - Instance variable which is not a state 

    return { 

       messages: [],

    };

  },

  componentDidUpdate: function() {

    if(this.scrollToBottom){

     // Animate DOM

     this.scrollToBottom = false;

    }

  },

  // ...

});

I would like to do that to make react component's code cleaner.

Thank you for helping

Why would you want to keep a variable like that? you return messages: [] which will be put into the state and referenced trough this.state.messages. — thsorens
– thsorens, Commented May 28, 2015 at 10:46

Anders Ekdahl · Accepted Answer · 2015-05-28 10:53:41Z

2

You can do that, but I would ask why you want to do that? What data would you store on the component that you don't want to store as state?

The point of putting it in the state is that React knows when you modify that state, and re-renders accordingly. If you define arbitrary properties on the instance React won't know about them.

Another good point about putting it in the state is that it makes it very easy to see where state is used and modified. Most bugs that occur in a component is related to state, so making the use of it obvious is really helpful.

edited May 28, 2015 at 10:53

answered May 28, 2015 at 10:46

Anders Ekdahl

23k4 gold badges73 silver badges61 bronze badges

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

6 Comments

Eric Hth Over a year ago

Thank your answer. I was doing that to prevent too many trigger of -render: . However thanks to your answer I may reconsider to chose carefully my state and instance variable. I was thinking about doing that to store other instance variable like scrollToBottom to trigger a scroll to bottom in componentDidUpdate: Is it better to initialize instance variable in componentWillMount?

Anders Ekdahl Over a year ago

Is scrollToBottom a function? If that's the case, then it should absolutely be a method on the instance. If it's a boolean for whether the component should scroll to bottom, it sounds like it should be a prop and you'd use getDefaultProps to set the initial value.

Eric Hth Over a year ago

scrollToBottom is a bool. Why should it be a prop instead of a instance variable? I am also using Firebase as database. Is it relevant to initialize this.firebaseRef as null in getInitialState: ?

Anders Ekdahl Over a year ago

By making it a prop, it's possible to override it by passing in a value for the prop which makes your component more flexible. If you don't need to be able to override it, I don't see a reason for making a variable of it since it never changes.

Michelle Tilley Over a year ago

All things considered, if you did absolutely want to set a variable directly on this, I would do it in componentWillMount. Side effects in a getter method like getInitialState is confusing and error-prone, as the name and purpose of the function makes it seem like it should be a pure function.

|

Collectives™ on Stack Overflow

ReactJS: Initializing instance variable in component's getInitialState?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related