[Fix] no-unused-state: avoid a crash

CHANGELOG.md

@@ -13,6 +13,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 ### Fixed
 * [`hook-use-state`]: Allow UPPERCASE setState setter prefixes ([#3244][] @duncanbeevers)
 * `propTypes`: add `VFC` to react generic type param map ([#3230][] @dlech)
+* [`no-unused-state`]: avoid a crash ([#3258][] @WillyLiaoWH @ljharb)
 
 ### Changed
 * [readme] remove global usage and eslint version from readme ([#3254][] @aladdin-add)
@@ -22,6 +23,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 [#3261]: https://github.com/yannickcr/eslint-plugin-react/pull/3261
 [#3260]: https://github.com/yannickcr/eslint-plugin-react/pull/3260
 [#3259]: https://github.com/yannickcr/eslint-plugin-react/pull/3259
+[#3258]: https://github.com/yannickcr/eslint-plugin-react/pull/3258
 [#3254]: https://github.com/yannickcr/eslint-plugin-react/pull/3254
 [#3251]: https://github.com/yannickcr/eslint-plugin-react/pull/3251
 [#3244]: https://github.com/yannickcr/eslint-plugin-react/pull/3244

lib/rules/no-unused-state.js

@@ -161,6 +161,9 @@ module.exports = {
     // Adds the name of the given node as a used state field if the node is an
     // Identifier or a Literal. Other node types are ignored.
     function addUsedStateField(node) {
+      if (!classInfo) {
+        return;
+      }
       const name = getName(node);
       if (name) {
         classInfo.usedStateFields.add(name);
@@ -371,7 +374,7 @@ module.exports = {
         }
         const scope = childScope.variableScope.childScopes.find((x) => x.block === node.value);
         const stateArg = node.value.params[1]; // probably "state"
-        if (!scope.variables) {
+        if (!scope || !scope.variables) {
           return;
         }
         const argVar = scope.variables.find((x) => x.name === stateArg.name);

tests/lib/rules/no-unused-state.js

@@ -989,16 +989,16 @@ eslintTester.run('no-unused-state', rule, {
     semver.satisfies(tsEslintVersion, '>= 5') ? {
       code: `
         interface Props {}
-        
+
         interface State {
           flag: boolean;
         }
-        
+
         export default class RuleTest extends React.Component<Props, State> {
           readonly state: State = {
             flag: false,
           };
-        
+
           static getDerivedStateFromProps = (props: Props, state: State) => {
             const newState: Partial<State> = {};
             if (!state.flag) {
@@ -1030,7 +1030,7 @@ eslintTester.run('no-unused-state', rule, {
         class KarmaRefundPillComponent extends GenericPillComponent {
           renderContent = () => {
             const { action } = this.props
-        
+
             return (
               <Box fontSize={[1]} mx={[2]} minWidth="10px" minHeight="26px" alignItems="center">
                 <FormattedText
@@ -1064,6 +1064,40 @@ eslintTester.run('no-unused-state', rule, {
       parserOptions: {
         sourceType: 'module',
       },
+    },
+    {
+      code: `
+        import React, { PureComponent } from 'react';
+
+        class TestNoUnusedState extends React.Component {
+          constructor(props) {
+            super(props);
+            this.state = {
+              id: null,
+            };
+          }
+
+          static getDerivedStateFromProps = (props, state) => {
+            if (state.id !== props.id) {
+              return {
+                id: props.id,
+              };
+            }
+
+            return null;
+          };
+
+          render() {
+            return <h1>{this.state.id}</h1>;
+          }
+        }
+
+        export default TestNoUnusedState;
+      `,
+      features: ['class fields'],
+      parserOptions: {
+        sourceType: 'module',
+      },
     }
   )),