React setState

R. Mark Volkmann, Object Computing, Inc.
March 30, 2017

Recently there has been a lot of conversation on Twitter about whether the React setState method is hard to learn. There are claims that it is better to learn Redux. This was triggered by a tweet from Eric Elliott which was further elaborated in this post. Here is my take on the debate.

What does setState do?

The setState method is called on an instance of a component to update its state. After updating the state, the component and all components it renders are re-rendered. This is done asynchronously and the virtual DOM makes it very efficient.

How is setState called?

One way to call setState is this.setState(someObject); The properties in someObject replace properties in the current state. This is referred to as a shallow merge. Any properties in someObject that are not already in the state are added. Any properties in someObject that are already in the state are replaced.

Another way to call setState is this.setState(someFunction); The function is passed the current state as an object. It must return an object that will be shallow merged into the current state just like in the first approach.

How does one choose which way to call setState?

If any of the new state values need to be computed based on current state values, use the function approach. Otherwise use the object approach. It is really that simple.

For example, if you want to set name to Bob and score to 5 regardless of the current state, do this:

      this.setState({name: 'Bob', score: 5});

If you want to uppercase the current name and increase the current score by one, do this:

      this.setState(state => ({
        name: state.name.toUpperCase(),
        score: state.score + 1
      });

When are the results available?

If you attempt to access a state property that you just changed by calling setState it will still have its old value. This is because setState performs the updates asynchronously. However, typically you want to use the new state values in the component render method. That works fine because setState triggers a re-render and it only does this after it has finished making the requested state changes.

Can setState be used as an alternative to Redux?

Definitely! One of the main characteristics of Redux is that it holds all the application state in one place, called the "store". If you decide that the top component will hold all the application state then it can be viewed as the equivalent of the Redux store.

In Redux, actions can be dispatched from anywhere. These typically result in updates to the store. So if Redux isn't being used, how would other components update the state of the top component? It's easy! You just need some strategy to make the setState method of the top component available everywhere. Here's one approach:

      React.setTopState = this.setState.bind(this);

Do this in the constructor of the top component. Now any component can call React.setTopState.

Is using setState simpler than using Redux?

Let's compile a list of the concepts that need to be learned in order to use Redux.

These are the minimum concepts that must be understood. Typically additional layers are added such as react-redux, redux-saga, redux-thunk, and more. Each of these introduce more concepts.

Really, how can anyone claim using Redux is simpler than the just using setState? Of course there are benefits in using Redux, especially for large applications. A big one is the ability to use the Redux Chrome plugin and "time travel debugging". However, for small to medium size applications trading that for the simplicity of using setState is often a good trade.

I'm very interested in feedback. Please email me here.