react/no-unused-prop-types

A prop that's declared but never read misleads anyone who uses the component, because they pass a value and nothing happens. It's usually left over from a change to the component.

The rule compares the props a component declares with the props it reads. It knows propTypes and, in TypeScript, the type of the props parameter.

Configure

Off by default. To turn it on:

[lint.rules]
"react/no-unused-prop-types" = "error" # or "warn"

Every option, set to its default:

[lint.rules]
"react/no-unused-prop-types" = ["error", {
  ignore = [], # list of strings
  skipShapeProps = true,
  customValidators = [], # list of strings
}]

Examples

Reported:

function Avatar({ name }) {
  return <span>{name}</span>;
}

Avatar.propTypes = {
  name: PropTypes.string,
  size: PropTypes.number,
};

type Props = {
  name: string;
  size?: number;
};

function Avatar({ name }: Props) {
  return <span>{name}</span>;
}

Not reported:

function Avatar({ name, size }) {
  return <span style={{ fontSize: size }}>{name}</span>;
}

Avatar.propTypes = {
  name: PropTypes.string,
  size: PropTypes.number,
};

The rule skips a component that spreads its props, or the rest of them:

function Avatar({ name, ...rest }) {
  return <span {...rest}>{name}</span>;
}

Avatar.propTypes = {
  name: PropTypes.string,
  size: PropTypes.number,
};

Options

Option	Default	What it does
ignore	[]	Prop names that are never reported.
skipShapeProps	true	Don't look inside PropTypes.shape() and PropTypes.exact().
customValidators	[]	Names of objects that hold your own validators. The rule doesn't look inside a call such as MyTypes.shape().

With skipShapeProps set to false, the rule checks a shape's fields too. Here user.email is reported:

function Avatar(props) {
  return <span>{props.user.name}</span>;
}

Avatar.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    email: PropTypes.string,
  }),
};

With MyTypes in customValidators, the rule leaves the fields of MyTypes.shape() alone:

function Avatar(props) {
  return <span>{props.user.name}</span>;
}

Avatar.propTypes = {
  user: MyTypes.shape({
    name: PropTypes.string,
    email: PropTypes.string,
  }),
};

When not to use it

The rule only follows props inside the component. If you pass the whole props object to a helper function, the props the helper reads are reported as unused.