react/prefer-read-only-props

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.

Configure

Off by default. To turn it on:

[lint.rules]
"react/prefer-read-only-props" = "error" # or "warn"

Examples

Reported:

type Props = {
  name: string;
  age?: number;
};

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

Not reported:

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:

type Props = {
  name: string;
  age?: number;
};

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