# react/require-default-props

> Require a default value for every prop that is not required

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.

{/* 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/require-default-props" = "error" # or "warn"
```

Every option, set to its default:

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

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

## Examples

Reported:

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

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

Not reported:

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

{/* bad {"options": [{"functions": "defaultArguments"}]} */}
```tsx
type Props = { name: string; punctuation?: string };

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

{/* good {"options": [{"functions": "defaultArguments"}]} */}
```tsx
type Props = { name: string; punctuation?: string };

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

With `forbidDefaultForRequired`:

{/* bad {"options": [{"forbidDefaultForRequired": true}]} */}
```jsx
function Greeting({ name }) {
  return <h1>Hello {name}</h1>;
}

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

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