noReactPropAssign

JSX and TSX

Summary

Rule available since: v2.0.0
Diagnostic Category: lint/nursery/noReactPropAssign
This rule doesn’t have a fix.
The default severity of this rule is information.
Sources:
- Same as react-hooks/react-compiler

Description

Disallow assigning to React component props.

React’s props are assumed to be immutable, and it is considered bad practice to assign to properties of the props object. When using the React Compiler, this is even a hard error.

Examples

Invalid

1
function Foo(props) {
2
  props.bar = "Hello " + props.bar;
3

4
  return <div>{props.bar}</div>
5
}

code-block.jsx:2:2 lint/nursery/noReactPropAssign ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Mutating component props is not allowed.
  
    1 │ function Foo(props) {
  > 2 │ 	props.bar = “Hello ” + props.bar;
      │ 	^^^^^
    3 │ 
    4 │ 	return <div>{props.bar}</div>
  
  ℹ Consider using a local variable instead.

Valid

1
const Foo = function({bar}) {
2
   bar = "Hello " + bar;
3
   return <div>{bar}</div>
4
 }

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noReactPropAssign": "error"
6
      }
7
    }
8
  }
9
}