When to use state and when props?

Question

I am studying the principles of react.

According to some reviews, some people says is better to keep your component stateless, what does it mean?

But other people says, that if you need to update your component, then you should learn how to set your state to the proper state.

I saw this.props / this.setProps and this.state / this.setState and I am confuse with that.

Something I am trying to figure is, how can I update a component by itself and not from a parent component? should I use props or state in this case?

I already read some docs about props and state, what I don't have clear, is: when to use one or another ?

Answer 1

Props vs. state comes down to "who owns this data?"

If data is managed by one component, but another component needs access to that data, you'd pass the data from the one component to the other component via props.

If a component manages the data itself, it should use state and setState to manage it.

So the answer to

how can I update a component by itself and not from a parent component? should I use props or state in this case?

is to use state.

Props should be considered immutable and should never be changed via mutation. setProps is only useful on a top-level component and generally should not be used at all. If a component passes another component a property, and the first component wants the second to be able to change it, it should also pass it a function property that the second component can call to ask the first component to update its state. For example:

var ComponentA = React.createClass({
  getInitialState: function() {
    return { count: 0 };
  },

  render: function() {
    return <Clicker count={this.state.count} incrementCount={this.increment} />;
  },

  increment: function() {
    this.setState({count: this.state.count + 1});
  }
});

// Notice that Clicker is stateless! It's only job is to
// (1) render its `count` prop, and (2) call its
// `incrementCount` prop when the button is clicked.
var Clicker = React.createClass({
  render: function() {
    // clicker knows nothing about *how* to update the count
    // only that it got passed a function that will do it for it
    return (
      <div>
        Count: {this.props.count}
        <button onClick={this.props.incrementCount}>+1</button>
      </div>
    );
  }
});

(Working example: https://jsbin.com/rakate/edit?html,js,output)

For and object-oriented programming analogy, think of a class/object: state would be the properties you put on the class; the class is free to update those as it sees fit. Props would be like arguments to methods; you should never mutate arguments passed to you.

---

Keeping a component "stateless" means that it doesn't have any state, and all its rendering is based on its props. Of course, there has to be state somewhere or else your app won't do anything! So this guideline is basically saying to keep as many components as possible stateless, and only manage the state in as few top-level components as possible.

Keeping components stateless makes them easier to understand, reuse, and test.

See A brief interlude: props vs state in the React docs for more information.

Answer 2

Use state when you know the variable value is going to affect the view. This is particularly critical in react, because whenever the state variable changes there is a rerender(though this is optimized with the virtual DOM, you should minimize it if you can), but not when a prop is changed (You can force this, but not really needed).

You can use props for holding all other variables, which you think can be passed into the component during the component creation.

If you have want to make a multi-select dropdown called MyDropdown for example

state = {
    show: true,
    selected:[],
    suggestions:this.props.suggestionArr.filter((i)=>{
        return this.state.suggestions.indexOf(i)<0;
    })
}

props={
   eventNamespace:'mydropdown',
   prefix : 'm_',
   suggestionArr:[],
   onItemSelect:aCallbackFn
}

As you can see, the objects in the state variable are going to affect the view some way or the other. The objects in the props are mostly objects which should remain the same throughout the component life cycle. So these objects can be callback functions, strings used to namespace events or other holders.

So if you do want to update the component by itself, you need to have to look into how componentWillRecieveProps ,componentWillUpdate, componentDidUpdate and componentShouldUpdate works. More or less, this depends on the requirement and you can use these lifecycle methods to ensure that the rendering is within the component and not in the parent.