"no-unused-prop-types" False Positive When Prop Used in "getDerivedStateFromProps" React 16 Lifecyle Method.

[mrbinky3000]

I'm still seeing this error with the following packages:

• "eslint": "^4.19.1",
• "eslint-config-airbnb": "^16.1.0",
• "eslint-plugin-react": "^7.8.2",
• "react": "^16.3.1",
• "react-dom": "^16.3.1",

Example of code:

import React from 'react';
import PropTypes from 'prop-types';

export default class Example extends React.Component {
  static propTypes = {
    colorName: PropTypes.string.isRequired,
    ext: PropTypes.string.isRequired,
    // ... others
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const {
      colorName, ext,
    } = nextProps;

    // ... code where colorName and ext are used
  }

  // ... rest of class
}

linting errors:

6:16  error  'colorName' PropType is defined but prop is never used   react/no-unused-prop-types
7:10  error  'ext' PropType is defined but prop is never used         react/no-unused-prop-types

eslintrc file in the project root folder:

{
    // this left intentionally blank
}

eslintrc file in the folder that contains our react app:

{
  "extends": [
    "airbnb"
  ],
  "settings": {
    "react": {
      "pragma": "React",
      "version": "16.3"
    },
  },
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true
  },
  "plugins": [
    "react",
    "jsx-a11y"
  ],
  "rules" {
     ... a few rule tweaks, none dealing with unused props.
  }
  "globals": {
    "expect": true,
    "PRODUCTION": true,
    "VERSION": true,
  }
}

Relevant eslint --debug info. Does Unknown node type "ClassProperty" help identify this issue?

eslint:cli-engine Processing /Users/blah/project/component/Example.jsx +70ms
eslint:cli-engine Linting /Users/blah/project/component/Example.jsx +0ms
eslint:config Constructing config file hierarchy for /Users/blah/project/component +70ms
eslint:config Using .eslintrc and package.json files +0ms
eslint:config Using config from cache +2ms
eslint:linter Linting code for /Users/blah/project/component/Example.jsx (pass 1) +2ms
eslint:traverser Unknown node type "ClassProperty": Estimated visitor keys ["type","start","end","loc","static","computed","key","variance","value","range"] +343ms
eslint:traverser Unknown node type "ClassProperty": Estimated visitor keys ["type","start","end","loc","static","computed","key","variance","value","range"] +2ms
eslint:traverser Unknown node type "ClassProperty": Estimated visitor keys ["type","start","end","loc","static","computed","key","variance","value","range"] +5ms
eslint:linter Generating fixed text for /Users/blah/project/component/Example.jsx (pass 1) +45ms

This issue was originally brought up in #1751 and #1681
A fix was released in v7.8.0 but It's not working for me in v7.8.2

[redbmk]

I ran into a similar problem, but I found it's OK with props as long as they aren't destructured, even though it prefers destructuring.

This isn't a fix (although it could be a workaround), but might help someone diagnose the bug.

e.g.

import React from 'react';
import PropTypes from 'prop-types';

export default class Example extends React.Component {
  static propTypes = {
    colorName: PropTypes.string.isRequired,
    ext: PropTypes.string.isRequired,
    // ... others
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const colorName = nextProps.colorName;
    const ext = nextProps.ext;
    
    // ... code where colorName and ext are used
  }

  // ... rest of class
}

should get rid of the warning, but would introduce Use object destructuring. [Error prefer-destructuring].

[hornta]

I can not reproduce this with the latest version. @mrbinky3000 @redbmk

[katrinaRenwickEmpire]

This is still an issue in version 7.21.4

[ljharb]

@katrinaRenwickEmpire can you provide code, the actual behavior, and the expected behavior?

[ljharb]

Pending a repro, this seems resolved.