---
url: /docs/guide/usage/linter/rules/react/immutability.md
---

### What it does

Disallows mutating props, state, hook arguments, hook return values,
and other values that are immutable by the Rules of React.

Powered by the React Compiler, which runs once per file and is shared
with the other React Compiler rules. Port of
[`react-hooks/immutability`](https://react.dev/reference/eslint-plugin-react-hooks/lints/immutability).

### Why is this bad?

React relies on immutability to know when to re-render; mutating these
values causes stale UI and lost updates.

### Examples

Examples of **incorrect** code for this rule:

```jsx
import { useState } from "react";
function Component() {
  const [state] = useState({ a: 0 });
  state.a = 1; // mutates state directly
  return <div>{state.a}</div>;
}
```

Examples of **correct** code for this rule:

```jsx
import { useState } from "react";
function Component() {
  const [state, setState] = useState({ a: 0 });
  return <div onClick={() => setState({ a: state.a + 1 })}>{state.a}</div>;
}
```

## How to use

## Version

This rule was added in v1.79.0.

## References