this.state value may not be directly used when updating the state in a React class component

• REACT_MISUSED_UPDATE_IN_SET_STATE
• Code Quality
• Low
• react

This rule applies when this.state value is directly used when updating the state in a React class component.

In React, this.state may not be the up-to-date value since this.state may be updated asynchronously. Also, React may batch multiple setState() calls into a single update for performance. Therefore, if the next state is calculated using this.state value, the state may be updated with a wrong value.

To prevent the possibility of the wrong update, you can use a callback function as the first argument of setState() instead of an object. The callback function receives the previous state and props as the arguments, which represent the up-to-date state.

Noncompliant Code Example

import React from 'react';

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ counter: this.state.counter + 1 }); // REACT_MISUSED_UPDATE_IN_SET_STATE alarm because 'this.state.counter' may not be the up-to-date value.
  }
  render() {
    return <div onClick={this.handleClick}>{this.state.counter}</div>;
  }
}

Compliant Code Example

import React from 'react';

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(prevState => {
      return { counter: prevState.counter + 1 };
    });
  }
  render() {
    return <div onClick={this.handleClick}>{this.state.counter}</div>;
  }
}

Version

This rule was introduced in DeepScan 1.6.0-beta.

See

• State Updates May Be Asynchronous