noReactPropAssignments

JSX and TSX

Summary

Rule available since: v2.0.0
Diagnostic Category: lint/correctness/noReactPropAssignments
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- react
Sources:
- Same as react-hooks/react-compiler

How to configure

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

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/correctness/noReactPropAssignments ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 ℹ 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
 }