---
url: /docs/guide/usage/linter/rules/react/no-deriving-state-in-effects.md
---

### What it does

Disallows deriving values from state inside an effect and storing them
back into state; derived values should be computed during render
instead.

Powered by the React Compiler, which runs once per file and is shared
with the other React Compiler rules. Port of
`react-hooks/no-deriving-state-in-effects`.

### Why is this bad?

Deriving state in effects causes a second render pass per update and
lets the derived copy fall out of sync with its source.

### Examples

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

```jsx
import { useEffect, useState } from "react";
function Component() {
  const [firstName] = useState("Taylor");
  const [lastName] = useState("Swift");
  const [fullName, setFullName] = useState("");
  useEffect(() => {
    setFullName(firstName + " " + lastName);
  }, [firstName, lastName]);
  return <div>{fullName}</div>;
}
```

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

```jsx
function Component({ firstName, lastName }) {
  const fullName = firstName + " " + lastName;
  return <div>{fullName}</div>;
}
```

## How to use

## Version

This rule was added in v1.79.0.

## References