react/require-default-props

An optional prop that the parent leaves out is undefined in the component. With a default for each optional prop, the component never needs to handle that case, and the defaults show what happens if a prop is missing.

By default the rule looks for the default in defaultProps. React 19 ignores defaultProps on function components, so set functions to "defaultArguments" there.

Configure

Off by default. To turn it on:

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

Every option, set to its default:

[lint.rules]
"react/require-default-props" = ["error", {
  functions = "defaultProps", # "defaultArguments", "defaultProps" or "ignore"
  classes = "defaultProps", # "defaultProps" or "ignore"
  forbidDefaultForRequired = false,
  ignoreFunctionalComponents = false,
}]

Examples

Reported:

function Greeting({ name, punctuation }) {
  return <h1>Hello {name}{punctuation}</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
  punctuation: PropTypes.string,
};

Not reported:

function Greeting({ name, punctuation }) {
  return <h1>Hello {name}{punctuation}</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
  punctuation: PropTypes.string,
};

Greeting.defaultProps = {
  punctuation: "!",
};

Options

Option	Default	What it does
functions	"defaultProps"	Where a function component sets its defaults: "defaultProps", "defaultArguments" (in the destructured parameter), or "ignore" to skip function components.
classes	"defaultProps"	"ignore" skips class components.
forbidDefaultForRequired	false	Also report a default in defaultProps for a required prop.
ignoreFunctionalComponents	false	An older way to write functions: "ignore".

With "defaultArguments", the defaults belong in the destructured parameter. The rule then reports defaultProps on a function component, and a default for a required prop.

type Props = { name: string; punctuation?: string };

function Greeting({ name, punctuation }: Props) {
  return <h1>Hello {name}{punctuation}</h1>;
}

type Props = { name: string; punctuation?: string };

function Greeting({ name, punctuation = "!" }: Props) {
  return <h1>Hello {name}{punctuation}</h1>;
}

With forbidDefaultForRequired:

function Greeting({ name }) {
  return <h1>Hello {name}</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

Greeting.defaultProps = {
  name: "world",
};