Skip to content

[Stateless Components + Object props + Flow]: Proptype is defined but prop is never used #1116

Closed
@joncursi

Description

@joncursi

Consider the following contrived example:

type PropsFlowType = {|
  ...
  primaryAction: {
    action: () => void, // here
    icon: string, // here
    title: string, // here
  },
  ...
|};

const StatelessComponent = ({ primaryAction, ... }: PropsFlowType) => (
  ...
  <SomeComponent
    action={primaryAction.action}
    icon={primaryAction.icon}
    title={primaryAction.title}
  />
  ...
);

Eslint will complain at the lines marked // here that these values are not used, even though they are in-fact used. Perhaps a compatibility issue with Flow?

Activity

ljharb

ljharb commented on Mar 17, 2017

@ljharb
Member

I'm not sure how Flow works here with nested shapes, but in PropTypes, it'd need to be PropTypes.shape({ … }), not an object literal. It's possible that this plugin doesn't work with nested object flow types?

What happens if you make primaryAction its own, separate type?

joncursi

joncursi commented on Mar 17, 2017

@joncursi
Author

Hmm. Breaking out primaryAction into it's own type results in the same error:

type PrimaryActionFlowType = {|
    action: () => void, // ESLint: primaryAction.action PropType is defined but prop is never used
    icon: string, // ESLint: primaryAction.icon PropType is defined but prop is never used
    title: string, // ESLint: primaryAction.title PropType is defined but prop is never used
|};

type PropsFlowType = {|
  ...
  primaryAction: PrimaryActionFlowType,
  ...
|};

const StatelessComponent = ({ primaryAction, ... }: PropsFlowType) => (
  ...
  <SomeComponent
    action={primaryAction.action}
    icon={primaryAction.icon}
    title={primaryAction.title}
  />
  ...
);
joncursi

joncursi commented on Mar 17, 2017

@joncursi
Author

Interestingly enough, I found that adding = {} after the props function argument takes away these errors:

...
const StatelessComponent = ({ primaryAction, ... }: PropsFlowType = {}) => (
...

I'm really not sure what this is doing, though. It seems more like a hack than a solution because now, if I actually do forget to use primaryAction.something, or any other prop for that matter, ESLint no longer warns me because it has been tricked by the = {} to believe everything is being used. Nothing will flag anymore.

billyvg

billyvg commented on Apr 17, 2017

@billyvg

Is this perhaps related to #587?

added and removed on Jun 13, 2017

46 remaining items

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @ljharb@billyvg@joncursi

      Issue actions

        [Stateless Components + Object props + Flow]: Proptype is defined but prop is never used · Issue #1116 · jsx-eslint/eslint-plugin-react