no-unused-prop-types doesn't support Props defined in Flow TypedArguments

[jseminck]

This syntax is not supported. Additionally, this code is already available for the prop-types rule, but we should extract this code to detect the existing prop-types to some shared utility so it can be shared between rules.

// Flow <0.53
class extends React.Component<DefaultProps, Props, State> {}
class extends React.Component<DefaultProps, Props, State> { props: Props; }

// Flow >=0.53
class extends React.Component<Props> {}
class extends React.Component<Props, State> {}

class extends React.Component { props: Props; }
class extends React.Component<Props> { props: Props; }
class extends React.Component<Props, State> { props: Props; }

[jseminck]

FYI I'm working on this: https://github.com/jseminck/eslint-plugin-react/tree/prop-types-util - just to make sure we don't do double work!

[jseminck]

Just an update on this and also for myself to keep track of all the changes:

• Added support to no-unused-prop-types for Flow 0.53 syntax: Component<Props, State>
• Added support to all other lifecycle methods for prop-types rule. Previously it only supported componentWillReceiveProps and constructor
• Added support for prevProps variable name for prop-types rule.
• Added support for destructuring in lifecycle methods for prop-types rule. e.g. componentDidUpdate({myProp}) { ... }

This is far from done. My biggest issue to tackle is how to make Component.detect() and this new PropTypes.detect() work together.

[athomann]

Is there more to do that hasn't been merged into the release candidate?

[jseminck]

Currently using the Flow TypedArgument syntax should work:

React.Component<void, Props, void>

or

React.Component<Props>

There's some work to complete as I would like to eliminate ALL shared code between the two rules (prop-types and no-unused-prop-types) so that both cover the same use-cases. Currently there's still a bit of a difference between the two.

But in general I'd expect the Flow syntax to work. Did you encounter any issues?

[athomann]

Nope! Just curious if this issue should be closed or open after I noticed the PR getting merged.

[bastoune]

hi @jseminck
I am still encountering troubles with this kind of code :

type Props = {
    loggedUser: User,
    logout: () => void,
}
[...]
    render() {
        const {state, props} = this
[...]
<SomeComponent user={props.loggedUser} logout={props.logout} />

I shows me the ESLint error
ESLint: 'logout' PropType is defined but prop is never used (react/no-unused-prop-types)

Having theses version number:

    "eslint": "5.3.0",
    "eslint-config-airbnb": "17.1.0",
    "eslint-plugin-flowtype": "2.50.0",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jest": "21.21.0",
    "eslint-plugin-jsx-a11y": "6.1.1",
    "eslint-plugin-react": "7.11.0",
    "flow": "0.2.3",
    "flow-bin": "0.78.0",
[...]
    "react": "16.4.2",

[ljharb]

@bastoune it’s not used in any of the code you showed; please show the entire component instead of eliding parts of it.

[ljharb]

This seems all fixed.

If not, please file a new issue.