Eslint-plugin-react: react/no-unused-prop-types on `setState`

[ardok]

My component doesn't have any this.state.
The lint cannot detect that I'm actually using the state inside setState from prevState argument.
But it says that:
error Unused state field: 'updateQueue' react/no-unused-state

class Component extends Component <{}, {updateQueue: Array<string>}> {
  ...
  debouncedUpdate = debounce((cellsetId, options) => {
    this.setState((prevState, props) => {
      const {updateQueue} = prevState;
      const {updateCells} = props;
      updateCells(cellsetId, updateQueue, options);
      return {
        updateQueue: [],
      };
    });
  }, 2000);
  ...
}

[ljharb]

it seems like the debounce is the issue.

In general, you shouldn't have arrow functions in class properties anyways; try this instead (it will be much more performant and lintable and much more importantly, more testable):

debouncedUpdate = debounce(this.update.bind(this), 2000);
update(cellsetId, options) {
  this.setState((prevState, props) => {
    const {updateQueue} = prevState;
    const {updateCells} = props;
    updateCells(cellsetId, updateQueue, options);
    return {
      updateQueue: [],
    };
  });
}

[ardok]

It's still giving me the error even using your suggestion.
Not really the debounce though, you can even do this:

function updateFoo(selectedIds) {
  return null;
}

class Test extends Component<{}, {selectedIds: Array<string>}> {
  constructor(props: *) {
    super(props);
    this.state = {
      selectedIds: [],
    };
  }

  onChange = (item: {id: string}) => {
    const {id} = item;
    this.setState((prevState, props) => {
      const {selectedIds} = prevState;
      selectedIds.push(id);
      updateFoo(selectedIds);
      this.setState({
        selectedIds: [],
      });
    });
  };

  render() {
    return (
      <div>
        <select onChange={() => this.onChange({id: '1'})}>
          <option value='1'>1</option>
        </select>
      </div>
    );
  }
}

And it will still complain about the no-unused-state.
I think at the moment, it could only mark it as ok as long as it sees something from this.state.

And regarding the arrow functions, yeah, I read some articles about that.
But it's just so much more convenient doing () => rather than having all the methods in constructor and doing this.method = this.method.bind(this); every time.

[kaiyoma]

I'm also running into this. I set some state (in componentWillMount) and the only place it gets accessed is inside a setState callback updater, which references prevState, not this.state, which appears to be confusing this rule. Checking only for instances of this.state.foo is not enough to determine conclusively that foo isn't being used.

[Titozzz]

Same thing here using functional setState

[battaile]

actually never mind, got a workaround for my specific case