prefer-read-only-props.md

react/prefer-read-only-props

📝 Enforce that props are read-only.

🔧 This rule is automatically fixable by the --fix CLI option.

Using Flow, one can define types for props. This rule enforces that prop types are read-only (covariant).

Rule Details

Examples of incorrect code for this rule:

In Flow:

type Props = {
  name: string,
}
class Hello extends React.Component<Props> {
  render () {
    return <div>Hello {this.props.name}</div>;
  }
}

function Hello(props: {-name: string}) {
  return <div>Hello {props.name}</div>;
}

const Hello = (props: {|name: string|}) => (
  <div>Hello {props.name}</div>
);

In TypeScript:

type Props = {
  name: string;
}
class Hello extends React.Component<Props> {
  render () {
    return <div>Hello {this.props.name}</div>;
  }
}

interface Props {
  name: string;
}
class Hello extends React.Component<Props> {
  render () {
    return <div>Hello {this.props.name}</div>;
  }
}

Examples of correct code for this rule:

In Flow:

type Props = {
  +name: string,
}
class Hello extends React.Component<Props> {
  render () {
    return <div>Hello {this.props.name}</div>;
  }
}

function Hello(props: {+name: string}) {
  return <div>Hello {props.name}</div>;
}

const Hello = (props: {|+name: string|}) => (
  <div>Hello {props.name}</div>
);

In TypeScript:

type Props = {
  readonly name: string;
}
class Hello extends React.Component<Props> {
  render () {
    return <div>Hello {this.props.name}</div>;
  }
}

interface Props {
  readonly name: string;
}
class Hello extends React.Component<Props> {
  render () {
    return <div>Hello {this.props.name}</div>;
  }
}