noReactPropAssignments (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.0.0
Diagnostic Category: lint/correctness/noReactPropAssignments
This rule isn’t recommended, so you need to enable it.
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>
  
  ℹ Props are read-only. Changing them can change data that belongs to the parent component, and React does not rerender when a prop is mutated.
  
  ℹ Consider using a local variable instead.

Valid

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