prefer-read-only-props

Require React function component props to be read-only.

Rule details Suggestion

This rule checks React function components and reports prop types that are still mutable.

With type information enabled, it can validate named prop types, React.FC, memo(...), and forwardRef(...) patterns. Without type information, it still auto-fixes inline type literals on component parameters.

What auto-fix covers

Auto-fix inserts readonly for inline prop type literals such as props: { value: string }. Named interfaces and type aliases may still report, but they are not rewritten by this rule.

Examples

Incorrect

Mutable props

function Button(props: { label: string; onClick: () => void }) {
  return <textbutton Text={props.label} />;
}

Correct

Read-only props

type ButtonProps = {
  readonly label: string;
  readonly onClick: () => void;
};

function Button(props: ButtonProps) {
  return <textbutton Text={props.label} />;
}

Notes

The rule is aimed at component names that look like React components, so helper functions such as makeConfig are not reported.

Destructured props are not auto-fixed. If you want full coverage for shared prop types, run ESLint with type-aware parsing.

Related rules

no-memo-children Catches one common memoization footgun in React components

ban-react-fc Steers component typing away from React.FC