ESLint: Use callback in setState when referencing the previous state

Question

For this piece of code I am getting eslint(AirBnb config) error: Use callback in setState when referencing the previous state

Does this error influence performance somehow and how can it be solved?

  handleSelect(event) {
    const entry = event.nativeEvent;

    if (entry == null) {
      this.setState({ ...this.state, selectedEntry: entry });
    } else
      this.setState({
        ...this.state,
        selectedEntry: JSON.stringify(entry),
        markerIsEnabled: true
      });

    console.log(event.nativeEvent);
  }

What is the expected result of your question? You only want to know why you get this error message? — Vencovsky, May 07 '19 at 14:41
Possible duplicate of [this.state inside setState ReactJS](https://stackoverflow.com/questions/51817798/this-state-inside-setstate-reactjs) — Anurag Srivastava, May 07 '19 at 14:42
You can remove `...this.state` from `setState`. It will only update parameters in the state you have changed. — Cameron Downer, May 07 '19 at 14:43

score 8 · Answer 1 · answered May 07 '19 at 14:58

As you can see in documentation

This rule should prevent usage of this.state inside setState calls. Such usage of this.state might result in errors when two state calls are called in batch and thus referencing old state and not the current state. An example can be an increment function:
function increment() {
  this.setState({value: this.state.value + 1});
}
If these two setState operations is grouped together in a batch it will look be something like the following, given that value is 1:
setState({value: 1 + 1})
setState({value: 1 + 1})
This can be avoided with using callbacks which takes the previous state as first argument:
function increment() {
  this.setState(prevState => ({value: prevState.value + 1}));
}

So this is why you have that rule, to avoid erros like this example.

In your case, what you should do is

handleSelect({ nativeEvent }) {    
    if (nativeEvent == null) {
        this.setState(previousState => ({
            ...previousState, 
            selectedEntry: nativeEvent
        }));
    } else {
      this.setState(previousState => ({
        ...previousState,
        selectedEntry: JSON.stringify(entry),
        markerIsEnabled: true
      }));
    }
}

But for your case, this an error won't happen because you don't have two consecutives setState and also, ...this.state or ...prevState won't make any diference because you aren't using the previous state to set a new state.

So for the code you provided in your question, just remove ...this.state and it will work fine, with no errors.

score 6 · Answer 2 · answered May 07 '19 at 15:01

You can remove ...this.state from setState because it will only update parameters in the state you have changed.

You can see in the React documentation that setState(stateChange) performs a performs a shallow merge of stateChange into the state.

Object.assign(
  previousState,
  stateChange,
  ...
)

This means you don't need to be passing your previous state in, unless new properties depend on it, as setState will do this merge for you.

handleSelect(event) {
    const entry = event.nativeEvent;

    if (entry == null) {
      this.setState({ selectedEntry: entry });
    } else {
      this.setState({
        selectedEntry: JSON.stringify(entry),
        markerIsEnabled: true
      });
    }

    console.log(event.nativeEvent);
  }

score 2 · Answer 3 · answered May 07 '19 at 14:43

2

Try this. It's because setState is async.

handleSelect({ nativeEvent }) {

    if (nativeEvent == null) {
        this.setState((previousState) => ({
            ...previousState, selectedEntry: nativeEvent
        }));
    } else
      this.setState((previousState) => ({
        ...previousState,
        selectedEntry: JSON.stringify(entry),
        markerIsEnabled: true
      }));
  }

answered May 07 '19 at 14:43

sandrooco

8,016
9
48
86

1

why is `...previousState` is needed here at all? – skyboyer May 07 '19 at 14:57
1

Right, could be omitted at all - which also removes the need for a callback. – sandrooco May 07 '19 at 14:59

ESLint: Use callback in setState when referencing the previous state

3 Answers3