Eslint-plugin-react: `no-unused-prop-types` and `getDerivedStateFromProps`

[Hypnosphi]

no-unused-prop-types should take into account usages from new React lifecycles

[teameh]

Looks like it's coming up, PR is already merged: https://github.com/yannickcr/eslint-plugin-react/pull/1681

When will this land?

[Hypnosphi]

Looks like it doesn't include getSnapshotBeforeUpdate

[pkuczynski]

When will this be released?

[jjaburke91]

+1 for this

[jinliming2]

Waiting for this.

[yannickcr]

Fixed in #1681

[Hypnosphi]

@yannickcr it still doesn't include getSnapshotBeforeUpdate

[ljharb]

Reopening due to https://github.com/yannickcr/eslint-plugin-react/issues/1751#issuecomment-377501937

[dantman]

The PR also appears to test for the version of react to enable the new lifecycle hooks. However remember that some code uses react-lifecycles-compat to polyfill them on older versions.

[ljharb]

Hm, that’s a fair point - however i think that if you’re doing that, it’s reasonable to require setting your version pragma to 16.3, since that’s what you’re simulating.

[yannickcr]

@Hypnosphi @ljharb Right. I missed this comment, I'll make a proper fix for it.

[mqklin]

When this will be released?

[yannickcr]

I hope in the next days.

[mrbinky3000]

Just wondering if this has been released yet? If so, was there a regression? 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
}

errors:

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

[ljharb]

@mrbinky3000 have you set your react version pragma to 16.3?

[mrbinky3000]

eslintrc file in the project root foler

{
    // 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,
  }
}

[ljharb]

That does seem like that should work.

[mrbinky3000]

I ran eslint with debug. Does Unknown node type "ClassProperty" help?

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

[ljharb]

@mrbinky3000 that does help, a lot. Would you mind filing a new issue with all this info, and link to it here?

[canda]

I installed [email protected] but I'm still seeing the same error.
I have some props that I'm using on getDerivedStateFromProps but I still get the error react/no-unused-prop-types
How are you guys normally generate small environments to reproduce bugs?
I tried unsuccesfully stackblitz and codesandbox, they didn't lint my code :/
Any other tools you are using to share bugs?

[ljharb]

@canda have you set your react version in settings?

[mqklin]

Works perfect for me! Thanks!

[canda]

ups!
Yeah, I didn't have the version set on my .eslintrc
Thanks @ljharb !

[danielepiccone]

Hi all, I am having the same issue with a code in a slight different form: (not using static properties)

  class FieldSelector extends Component {
    render () { ... }
  }

  FieldSelector.getDerivedStateFromProps = (props, state) => {            
    const selectedFields = props.selectedFields;                                  
    const disabledFields = {};                                                    
    ...                                                              
    return { disabledFields };                                                    
  };                                                                              

  FieldSelector.propTypes = {                                             
    intl: intlShape,                                                              
    value: PropTypes.string,                                                      
>>  selectedFields: PropTypes.arrayOf(PropTypes.string),                          
    onFieldSelect: PropTypes.func.isRequired                                      
  };       

my eslint config includes

    settings: {                                                                   
      react: {                                                                    
        pragma: "React",                                                          
        version: "16.3"                                                           
      }       

my eslint --debug shows it has been running with the latest version

eslint:plugins Loaded plugin react ([email protected]) (from /home/.../node_modules/eslint-plugin-react/index.js) +129ms

...

  373:19  error  'selectedFields' PropType is defined but prop is never used  react/no-unused-prop-types

[ljharb]

@danielepiccone can you file that as a new issue?

[jayasme]

Still getting the error, I am using the latest version 7.11.1.

[ljharb]

That’s because the fix isn’t released yet.

[danielepiccone]

Opened a new issue here https://github.com/yannickcr/eslint-plugin-react/issues/2028

[plysik]

What's the status of this issue?

[ljharb]

@plysik as you can see on this very page, the issue is closed with a commit, which means the fix is in master. As you can see from the commit, it’s been released since v7.8.

If you are having a problem, please file a new issue.

[plysik]

I've missed that tag as I saw the post form 25 Oct 2018. I just need to update package. Thanks!