# react/no-unused-prop-types

> Disallow props that are declared but never used in the component

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.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

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

Every option, set to its default:

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

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"count": 1} */}
```jsx
function Avatar({ name }) {
  return <span>{name}</span>;
}

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

{/* bad {"count": 1} */}
```tsx
type Props = {
  name: string;
  size?: number;
};

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

Not reported:

{/* good */}
```jsx
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:

{/* good */}
```jsx
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:

{/* bad {"count": 1, "options": [{"skipShapeProps": false}]} */}
```jsx
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:

{/* good {"options": [{"skipShapeProps": false, "customValidators": ["MyTypes"]}]} */}
```jsx
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.