no-unused-state doesn't respect usage in gDSFP

[hornta]

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

    this.state = {
      foo: props.foo // is reporting "[eslint] Unused state field: 'foo' [react/no-unused-state]"
    };
  }

  static getDerivedStateFromProps(props, state) {
    
    // am using state.foo
    if (state.foo) {
      return { bar: 123 };
    }

    return null;
  }
}

[ljharb]

What React version have you set in settings?

[hornta]

16.3.1

[alexzherdev]

I believe this was fixed in #1829 (it's not released yet).
(Although I noticed that the code isn't checking React version for gDSFP)

[ljharb]

That’s probably ok since it can be polyfilled in older react versions.

[lafiosca]

I see that this issue is still open, although ostensibly it was fixed and released already in 7.12.0 at the end of December.

I am running into basically the same problem today with 7.14.3, but the difference is that I'm using TypeScript. When I copy/paste the JS code from above, it works fine (no warning). But when I write a very similar TSX file, I still get a warning Unused state field: 'flag'eslint(react/no-unused-state):

import { Component } from 'react';

interface Props {}

interface State {
	flag: boolean;
}

class RuleTest extends Component<Props, State> {
	readonly state: State = {
		flag: false,  // <-- warning shows up on this line
	};

	static getDerivedStateFromProps = (props: Props, state: State) => {
		const newState: Partial<State> = {};
		if (!state.flag) {
			newState.flag = true;
		}
		return newState;
	};
}

export default RuleTest;

I am somewhat ignorant of how these rules are implemented, so I apologize if this is expected behavior. Also, if I should create a new issue from this, please let me know. (For now I will likely just disable the rule in my project.)

[ljharb]

cc @alexzherdev ^

[ljharb]

It's only fixable for the modern TS eslint parser; the old one fails to provide the information required.