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

### 作用

禁止在 effect 中从状态派生值并将其存回状态；派生值应在渲染期间计算。

由 React Compiler 提供支持，该编译器每个文件运行一次，并与其他 React Compiler 规则共享。移植自
`react-hooks/no-deriving-state-in-effects`.

### 为什么这是不好的做法？

在 effect 中派生状态会导致每次更新都额外进行一次渲染，并使派生副本与其来源失去同步。

### 示例

此规则的**错误**代码示例：

```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>;
}
```

此规则的**正确**代码示例：

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

## 使用方法

## 版本

此规则在 v1.79.0 中添加。

## 参考资料