prefer-read-only-props

Full Name in eslint-plugin-react-x

react-x/prefer-read-only-props

Full Name in @eslint-react/eslint-plugin

@eslint-react/prefer-read-only-props

Features

🔍 💭

What it does

This rule enforces that function components props are read-only.

Props are read-only snapshots in time: every render receives a new version of props. You can't change props. This rule enforces that you don't accidentally mutate props.

Examples

Failing

import React from "react";
 
function MyComponent(props: { name: string }) {
  //                 ^^^^^^^^^^^^^^^^^^^^^^^
  //                 - A function component's props should be read-only.
  return <div>{props.name}</div>;
}

import React from "react";
 
interface Props {
  name: string;
}
 
function MyComponent(props: Props) {
  //                 ^^^^^^^^^^^^
  //                 - A function component's props should be read-only.
  return <div>{props.name}</div>;
}

Passing

import React from "react";
 
function MyComponent(props: { readonly name: string }) {
  return <div>{props.name}</div>;
}

import React from "react";
 
interface Props {
  readonly name: string;
}
 
function MyComponent(props: Props) {
  return <div>{props.name}</div>;
}

What it does

Examples

Failing

Passing

Implementation

Further Reading

On this page