Skip to content
← Back to rules

react/exhaustive-deps Correctness

⚠️ 🛠 💡 A dangerous auto-fix and a suggestion are available for this rule.

作用

检查诸如 useEffect 之类的 Hooks 的依赖项列表。

为什么这不好?

useEffect 这样的 React Hooks 需要将依赖项列表作为参数传入。这个列表用于判断副作用何时需要重新运行。如果列表缺失或不完整,副作用可能会比必要时更频繁地运行,或者根本不运行。

示例

此规则的错误代码示例:

javascript
function MyComponent(props) {
  useEffect(() => {
    console.log(props.foo);
  }, []);
  // `props` 缺少在依赖数组中
  return <div />;
}

此规则的正确代码示例:

javascript
function MyComponent(props) {
  useEffect(() => {
    console.log(props.foo);
  }, [props]);
  return <div />;
}

配置

此规则接受一个包含以下属性的配置对象:

additionalHooks

type: string

default: null

可选地提供一个用于检查的额外 hooks 的正则表达式。

如何使用

To enable this rule using the config file or in the CLI, you can use:

json
{
  "plugins": ["react"],
  "rules": {
    "react/exhaustive-deps": "error"
  }
}
ts
import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/exhaustive-deps": "error",
  },
});
bash
oxlint --deny react/exhaustive-deps --react-plugin

版本

此规则在 v0.12.0 中添加。

参考资料