Is it a good practice to modify a component's state and then call "setState(this.state)"?

Question

I'm using ReactJS.

I have a stateful component (stopwatch container) and multiple child components which are stateless (stopwatches).

In the outer component, I'm doing something like this:

// the outer component is a "container" for multiple stopwatches
tick: function() {
  for (var i = 0; i < this.state.stopwatches.length; i++)
    {
      // if a particular stopwatch is "started", I'll increase it's time
      if (this.state.stopwatches[i].status == "started")
        {
          this.state.stopwatches[i].time.seconds++;
          // do some processing
        }
    }
  // this is the suspicious code!
  this.setState(this.state);
}

Notice that I'm changing the this.state property and then calling setState() on the state object itself. This seems so wrong to me. But, in the other hand, in order to not manipulate the state object itself, i'd have to clone it and then do setState(stateClone), but I'm not sure if it's possible to clone objects effectively in JS, neither if I really should do this.

Can I continue to do setState(this.state) ?

if you aren't facing some side-effects from doing what you're doing, then it should be fine. — Amit Joki, Feb 03 '15 at 13:57
Actually I'm asking if it's a good practice from the ReactJS perspective. Maybe there's better way of doing it. — Andre Pena, Feb 03 '15 at 13:59

score 3 · Accepted Answer · answered Feb 03 '15 at 14:21

3

Instead of calling this.setState(this.state) you can just call this.forceUpdate().

Just remember that this is not recommended way of updating components state. If you are unsure about your modifications take a look on Immutability Helpers.

answered Feb 03 '15 at 14:21

daniula

6,898
4
32
49

score 3 · Answer 2 · edited Aug 06 '21 at 05:48

Just my two cents here: React will re-render every time you call setState:

boolean shouldComponentUpdate(object nextProps, object nextState)

returns true by default. If you don't wish to re-render make shouldComponentUpdate(object nextProps, object nextState) to return false.

Quoting from Facebook docs:

By default, shouldComponentUpdate always returns true to prevent subtle bugs when state is mutated in place, but if you are careful to always treat state as immutable and to read only from props and state in render() then you can override shouldComponentUpdate with an implementation that compares the old props and state to their replacements.

score 1 · Answer 3 · answered Feb 03 '15 at 17:08

Aside from immutability (which is always good), the second best would be this.setState({stopwatches: this.state.stopwatches}).

With immutability helpers, it'd look like this:

var stopwatches = this.state.stopwatches.map(function(watch){
  return update(watch, {
    time: {$set: watch.time + 1}
  });
});
this.setState({stopwatches: stopwatches})

Or with es6 you can save a few characters.

var stopwatches = this.state.stopwatches.map(watch => update(watch, {
    time: {$set: watch.time + 1}
});
this.setState({stopwatches})

Is it a good practice to modify a component's state and then call "setState(this.state)"?

3 Answers3

Linked