Eslint-plugin-react: "no-unused-state" w/ Used State as prevState

[alistair-hmh]

Version: 7.12.4

Code:

import React from 'react';

class ComponentX extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0,
      // Unused state field: 'allowUpdates'eslint(react/no-unused-state)
      allowUpdates: true
    };
  }

  update() {
    this.setState(prevState => {
      if (prevState.allowUpdates) {
        // (... but the state is used here?)
        const nextCounter = prevState.counter + 1;

        return {
          counter: nextCounter
        };
      }
    });
  }

  render() {
    return (
      <div>
        <div>Counter = {this.state.counter}</div>{" "}
        <button onClick={() => this.update()}>Update</button>
      </div>
    );
  }
}

export default ComponentX;

CodeSandbox: https://codesandbox.io/s/2o9pvqnyky

Screengrab:

[ljharb]

If you instead do this, does it still complain?

update() {
    this.setState(({ counter, allowUpdates }) => {
      if (allowUpdates) {
        // (... but the state is used here?)
        const nextCounter = counter + 1;

        return {
          counter: nextCounter
        };
      }
    });
  }

[alistair-hmh]

Yes, unfortunately, it still complains when destructuring like that.

[jzabala]

This seems to be working fine with versions:

"eslint": "^7.3.1",
"eslint-plugin-react": "^7.20.2"

As the picture shows, hello is not being used and triggers the rule but allowUpdates is only being used with prevState as in the issue description.