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:

bunfig.toml

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

Every option, set to its default:

bunfig.toml

[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",
};