no-unused-prop-types.md

Prevent definitions of unused propTypes (react/no-unused-prop-types)

Warns if a prop with a defined type isn't being used.

Note: You can provide types in runtime types using PropTypes and/or statically using TypeScript or Flow. This rule will validate your prop types regardless of how you define them.

Rule Details

The following patterns are considered warnings:

class Hello extends React.Component {
  render() {
    return <div>Hello Bob</div>;
  }
});

Hello.propTypes = {
  name: PropTypes.string
},

type Props = {
  firstname: string,
  middlename: string, // middlename is never used above
  lastname: string
}

class Hello extends React.Component<Props> {
  render() {
    return <div>Hello {this.props.firstname} {this.props.lastname}</div>;
  }
}

The following patterns are not considered warnings:

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
};

Hello.propTypes: {
  name: PropTypes.string
},

Rule Options

This rule can take one argument to ignore some specific props during validation.

...
"react/no-unused-prop-types": [<enabled>, { customValidators: <customValidator>, skipShapeProps: <skipShapeProps> }]
...

• enabled: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
• customValidators: optional array of validators used for propTypes validation.
• skipShapeProps: In some cases it is impossible to accurately detect whether or not a PropTypes.shape's values are being used. Setting this option to true will skip validation of PropTypes.shape (true by default).

Known Issues/Limitations

• False Positives: SFC (helper render methods)

False Positives SFC

Stateless Function Components (SFCs) accept props as an argument and return a JSX expression. Even if the function gets called from a component, the props that are only used inside the component are not be considered used by a component.

Triggers false positive:

function AComponent(props) {
  function helperRenderer(aProp) { // is considered SFC
    return (
      <span>{aProp}{props.bProp}</span>
    );
  }

  return (
    <div>
      {helperRenderer(props.aProp)}
    </div>
  );
}

AComponent.propTypes = {
  aProp: PropTypes.string,
  bProp: PropTypes.string // bProp is defined but never used
};

A suggested fix is to assign a bProp to a variable outside of the SFC.

function AComponent(props) {
  const { bProp } = props
  function helperRenderer(aProp) { // is considered SFC
    return (
      <span>{aProp}{bProp}</span>
    );
  }

  return (
    <div>
      {helperRenderer(props.aProp)}
    </div>
  );
}

AComponent.propTypes = {
  aProp: PropTypes.string,
  bProp: PropTypes.string
};