react/default-props-match-prop-types

A default for a required prop is a contradiction. Either the caller must pass the prop and the default is dead code, or the prop is optional and its type is wrong. A default for a prop that isn't declared at all is often a typo or a leftover from a rename.

The prop types can be propTypes or a TypeScript type. A component that doesn't declare prop types isn't checked.

Configure

Off by default. To turn it on:

[lint.rules]
"react/default-props-match-prop-types" = "error" # or "warn"

Every option, set to its default:

[lint.rules]
"react/default-props-match-prop-types" = ["error", {
  allowRequiredDefaults = false,
}]

Examples

Reported:

function Greeting({ name, greeting }) {
  return <p>{greeting}, {name}</p>;
}
Greeting.propTypes = {
  name: PropTypes.string.isRequired,
  greeting: PropTypes.string,
};
Greeting.defaultProps = {
  name: "friend", // required, so never used
  greting: "Hello", // no such prop
};

function Greeting(props: { name: string; greeting?: string }) {
  return <p>{props.greeting}, {props.name}</p>;
}
Greeting.defaultProps = { name: "friend" };

Not reported:

function Greeting({ name, greeting }) {
  return <p>{greeting}, {name}</p>;
}
Greeting.propTypes = {
  name: PropTypes.string.isRequired,
  greeting: PropTypes.string,
};
Greeting.defaultProps = {
  greeting: "Hello",
};

Options

function Greeting({ name }) {
  return <p>Hello, {name}</p>;
}
Greeting.propTypes = { name: PropTypes.string.isRequired };
Greeting.defaultProps = { name: "friend" };