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.

Why is this good?

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 (: { : string }) {
  //             - A function component's props should be read-only.
  return <>{.}</>;
}

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

Passing

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

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