---
url: /docs/guide/usage/linter/rules/react/set-state-in-render.md
---

### What it does

Disallows unconditionally setting state during render (including
inside `useMemo` callbacks), which triggers additional renders and can
cause infinite render loops.

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

### Why is this bad?

Each render-time `setState` schedules another render; unconditional
ones loop forever, conditional ones still double-render.

### Examples

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

```jsx
import { useState } from "react";
function Component() {
  const [state, setState] = useState(0);
  setState(state + 1); // schedules another render on every render
  return <div>{state}</div>;
}
```

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

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

## How to use

## Version

This rule was added in v1.79.0.

## References