ContextQMD
Back to Biomejs

noReactPropAssignments

src/content/docs/linter/rules/no-react-prop-assignments.mdx

latest3.0 KB
Original Source

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v2.0.0` - Diagnostic Category: [`lint/correctness/noReactPropAssignments`](/reference/diagnostics#diagnostic-category) - 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**](/reference/diagnostics#information). - This rule belongs to the following domains: - [`react`](/linter/domains#react) - Sources: - Same as [`react-hooks/react-compiler`](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md)

How to configure

json
{
	"linter": {
		"rules": {
			"correctness": {
				"noReactPropAssignments": "error"
			}
		}
	}
}

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

jsx
function Foo(props) {
	props.bar = "Hello " + props.bar;

	return <div>{props.bar}</div>
}
<pre class="language-text"><code class="language-text">code-block.jsx:2:2 <a href="https://biomejs.dev/linter/rules/no-react-prop-assignments">lint/correctness/noReactPropAssignments</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Mutating component props is not allowed.</span> <strong>1 │ </strong>function Foo(props) &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> props.bar = &quot;Hello &quot; + props.bar; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong> <strong>4 │ </strong> return &lt;div&gt;&#123;props.bar&#125;&lt;/div&gt; <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Consider using a local variable instead.</span> </code></pre>

Valid

jsx
const Foo = function({bar}) {
   bar = "Hello " + bar;
   return <div>{bar}</div>
 }
</TabItem> </Tabs>