← Back to rules

react/exhaustive-deps 正确性

An auto-fix is available for this rule.

它的作用

验证 useEffect 等 Hook 的依赖项列表。

为什么这是错误的？

像 useEffect 这样的 React Hook 需要传递一个依赖项列表作为参数。该列表用于确定何时应重新运行副作用。如果依赖项列表缺失或不完整，副作用可能会比必要时更频繁地运行，或者根本不会运行。

示例

此规则的 错误 代码示例：

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

此规则的 正确 代码示例：

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

配置

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

additionalHooks

type: string

default: null

可选地提供一个额外的 Hook 的正则表达式以进行检查。

如何使用

要通过配置文件或 CLI 启用 此规则，可以使用：

配置文件 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/exhaustive-deps": "error"
  }
}

CLI

oxlint --deny react/exhaustive-deps --react-plugin

参考资料

• 规则源码