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

### What it does

Disallows calling `setState` synchronously inside an effect body.

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-effect`](https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-effect).

### Why is this bad?

Calling `setState` synchronously in an effect triggers an immediate
extra render pass and usually indicates non-local derived data, a
derived-event pattern, or improper external-data synchronization.
Values that can be computed from props and state should be computed
during render instead.

### Examples

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

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

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

```jsx
function Component({ value }) {
  const doubled = value * 2;
  return <div>{doubled}</div>;
}
```

## How to use

## Version

This rule was added in v1.79.0.

## References