Destructured use of property is not recognized by no-unused-prop-types

[kumar303]

Given a React component like:

export default class Thing extends React.Component {
  static propTypes = {
    i18n: PropTypes.shape({
      gettext: PropTypes.func,
    }).isRequired,
  }

  render() {
    const { i18n } = this.props;

    return (
      <div>
        <span>{i18n.gettext('Some Text')}</span>
      </div>
    );
  }
}

And the following eslint rule:

"react/no-unused-prop-types": "error"

I see the following error:

/Users/kumar/tmp/eslint-scratch/index.js
  6:16  error  'i18n.gettext' PropType is defined but prop is never used  react/no-unused-prop-types

This is incorrect because the i18n property is destructured into a new constant and then the gettext() function is called. If I edit the code so that it doesn't use destructuring then the error goes away, revealing the bug.

Here is a small app that reproduces it: eslint-scratch.zip. Run:

npm install
npm run eslint

This is similar to #782 but they seem different.

[yury-dymov]

I am facing same issue with very similar use-case

const propTypes = {
  clientVersion:  PropTypes.string,
};

const defaultProps = {
  clientVersion: null,
};

class App extends Component {
  constructor(props) {
    super(props);

    this.checkClientVersion = this.checkClientVersion.bind(this);
  }

  checkClientVersion(props = this.props) {     // <-- might puzzle parser but still a valid use-case
    const { clientVersion } = props;                   // <-- used!
   <...>
  }

  render() {
    <...>
}

App.propTypes     = propTypes;
App.defaultProps  = defaultProps;

export default App;

[ljharb]

@yury-dymov in your case, it's only used if they don't pass in a props arg - can I ask what the use case for that is? It seems very un-React.

[yury-dymov]

@ljharb, well, to me it looks very common

  componentDidMount() {
    this.checkClientVersion();
  }

  componentWillReceiveProps(nextProps) {
    <...>
    this.checkClientVersion(nextProps);
  }


  checkClientVersion(props = this.props) {
    const { clientVersion } = props;
    <...>
  }

So, basically it is helper method, which is called to do whatever, when props are provided/updated. Normally it is called with no parameters but for componentWillReceiveProps() I want to pass nextProps instead of current.

[ljharb]

If it's a helper method, it shouldn't be an instance method - and then this plugin won't warn on it. Instance methods should use this in all code paths, otherwise they shouldn't be instance methods.

[tristanbbq]

Could this be related: #611 ?

[EvHaus]

I've been thinking about the best way to handle this. The only thing I can think of is to build some common conventions into the rule. ie. Any function that uses the following patterns this.props.something or props.something, or nextProps.something or prevProps.something would count towards being considered used.

It will prevent false positive warnings, but would also not catch certain cases where the object isn't actually the component props.

Thoughts?

[nkt]

This is not linting rule, it's static analysis rule. Static analyzer should be able to resolve variables instead just checking them by some "mask".
I guess this project needs magic function resolveVariable, this function can solve many issues:

// user code
const { settings: { foo } } = this.props;

// plugin
resolve('foo') -> this.props.settings.foo

// user code
const { users } = this.props;
users.map(({ id }) => ...);

// plugin
resolve('id') -> this.props.users[].id