# react/prefer-read-only-props

> Require the props in a component's type to be `readonly`

A component must not change its props. They belong to the parent, and React doesn't render again when you assign to them. If every prop in the type is `readonly`, TypeScript rejects `props.name = "..."` when you compile.

`--fix` adds `readonly` in front of the prop.

{/* 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/prefer-read-only-props" = "error" # or "warn"
```

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

## Examples

Reported:

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

function Profile(props: Props) {
  return <p>{props.name} ({props.age})</p>;
}
```

Not reported:

{/* good */}
```tsx
type Props = {
  readonly name: string;
  readonly age?: number;
};

function Profile(props: Props) {
  return <p>{props.name} ({props.age})</p>;
}
```

`Readonly<Props>` isn't reported either:

{/* good */}
```tsx
type Props = {
  name: string;
  age?: number;
};

function Profile(props: Readonly<Props>) {
  return <p>{props.name} ({props.age})</p>;
}
```