Eslint-plugin-react: "no-unused-prop-types" inside async functions (include arrow)

[isnifer]

Hi!
I think there is a bug with async functions.
property: "no-unused-prop-types"
parser: "[email protected]"
where: "async functions"
example:

{
  code: [
    'export class Example extends Component {',
    '  static propTypes = {',
    '    failed: PropTypes.func.isRequired,',
    '    loadUserProfile: PropTypes.func.isRequired,',
    '  }',
    '  handleLogin = async () => {',
    '    await this.props.failed();',
    '    await this.props.loadUserProfile();',
    '  };',
    '}'
  ].join('\n'),
  parser: 'babel-eslint'
},

[GGAlanSmithee]

Some additional info which might help:

this _will_ error:

onSubmit = async (e) => {
    this.setState({loggingIn: true, success: false, message: null})

    const {email, password} = this.state
    const {login, setAuthenticated} = this.props // not detected by eslint

    const {success, message} = await login(email, password)

    this.setState({loggingIn: false, success, message})
    setAuthenticated(success)

    if (success) {
        const {router, location: {state: {nextPathname} = {}}} = this.props

        setTimeout(() => {
            router.push(nextPathname || '/')
        }, 1000)
    }
}

this will _not_ error:

onSubmit = async (e) => {
    this.setState({loggingIn: true, success: false, message: null})

    const {email, password} = this.state
    // properly detected by eslint
    const {login, setAuthenticated, router, location: {state: {nextPathname} = {}}} = this.props

    const {success, message} = await login(email, password)
    this.setState({loggingIn: false, success, message})
    setAuthenticated(success)

    if (success) {
        setTimeout(() => {
            router.push(nextPathname || '/')
        }, 1000)
    }
}

The only difference between these snippets is how this.props is destructured. In the first example, location and router props are destructured separately, and in the second example all props are accessed together. This is probably not the whole solution, since @isnifer isn't destructuring at all. But mabe you can try and see if this works;

{
  code: [
    'export class Example extends Component {',
    '  static propTypes = {',
    '    failed: PropTypes.func.isRequired,',
    '    loadUserProfile: PropTypes.func.isRequired,',
    '  }',
    '  handleLogin = async () => {',
    '    const {failed, loadUserProfile} = this.props;',
    '    await failed();',
    '    await loadUserProfile();',
    '  };',
    '}'
  ].join('\n'),
  parser: 'babel-eslint'
},

[TrevorSayre]

export default class Users extends Component {

  static propTypes = {
    ...
    onLoad: PropTypes.func.isRequired,
  };

  async componentWillMount() {
    await Promise.all([
      this.props.onLoad(),
      this.onSearch(),
    ]);
    ...
  }

  ...

}

'onLoad' PropType is defined but prop is never used (react/no-unused-prop-types)

[Wildhoney]

@TrevorSayre similar for me — using [email protected].