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:

bunfig.toml

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

Every option, set to its default:

bunfig.toml

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

Examples#

example.jsx1 problem

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

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

example.tsx1 problem

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

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

example.jsxNo problems

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:

example.jsxNo problems

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:

example.jsxwith { "skipShapeProps": false }1 problem

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:

example.jsxwith { "skipShapeProps": false, "customValidators": ["MyTypes"] }No problems

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.