API 参考

eslint-plugin-react-hooks - This feature is available in the latest RC version

eslint-plugin-react-hooks 提供 ESLint 规则来强制执行 React 的规则。

¥eslint-plugin-react-hooks provides ESLint rules to enforce the Rules of React.

此插件可帮助你在构建时捕获违反 React 规则的行为，确保你的组件和钩子遵循 React 的正确性和性能规则。lint 涵盖了 React 的基本模式（exhaustive-deps 和 rules-of-hooks）以及 React Compiler 标记的问题。此 ESLint 插件会自动显示 React Compiler 的诊断信息，即使你的应用尚未采用该编译器，也可以使用。

¥This plugin helps you catch violations of React’s rules at build time, ensuring your components and hooks follow React’s rules for correctness and performance. The lints cover both fundamental React patterns (exhaustive-deps and rules-of-hooks) and issues flagged by React Compiler. React Compiler diagnostics are automatically surfaced by this ESLint plugin, and can be used even if your app hasn’t adopted the compiler yet.

注意

当编译器报告诊断信息时，这意味着编译器能够静态检测到不受支持或违反 React 规则的模式。当检测到这种情况时，它会自动跳过这些组件和钩子，同时保持应用的其余部分处于编译状态。这确保了安全优化的最佳覆盖范围，不会破坏你的应用。

¥When the compiler reports a diagnostic, it means that the compiler was able to statically detect a pattern that is not supported or breaks the Rules of React. When it detects this, it automatically skips over those components and hooks, while keeping the rest of your app compiled. This ensures optimal coverage of safe optimizations that won’t break your app.

这对于 linter 来说意味着你无需立即修复所有违规行为。按照你自己的节奏逐步增加优化组件的数量。

¥What this means for linting, is that you don’t need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.

推荐规则

¥Recommended Rules

These rules are included in the recommended preset in eslint-plugin-react-hooks:

  • exhaustive-deps - 验证 React 钩子的依赖数组是否包含所有必要的依赖。

    ¥exhaustive-deps - Validates that dependency arrays for React hooks contain all necessary dependencies

  • rules-of-hooks - 验证组件和钩子是否遵循钩子规则

    ¥rules-of-hooks - Validates that components and hooks follow the Rules of Hooks

  • component-hook-factories - 验证定义嵌套组件或钩子的高阶函数

    ¥component-hook-factories - Validates higher order functions defining nested components or hooks

  • config - 验证编译器配置选项。

    ¥config - Validates the compiler configuration options

  • error-boundaries - 验证使用错误边界而不是 try/catch 来处理子错误。

    ¥error-boundaries - Validates usage of Error Boundaries instead of try/catch for child errors

  • gating - 验证门控模式的配置

    ¥gating - Validates configuration of gating mode

  • globals - 在渲染过程中验证全局变量的赋值/修改

    ¥globals - Validates against assignment/mutation of globals during render

  • immutability - 验证是否修改属性、state 和其他不可变值。

    ¥immutability - Validates against mutating props, state, and other immutable values

  • incompatible-library - 验证是否使用了与 memoization 不兼容的库

    ¥incompatible-library - Validates against usage of libraries which are incompatible with memoization

  • preserve-manual-memoization - 验证编译器是否保留了现有的手动记忆。

    ¥preserve-manual-memoization - Validates that existing manual memoization is preserved by the compiler

  • purity - 通过检查已知不纯函数来验证组件/钩子是否为纯函数。

    ¥purity - Validates that components/hooks are pure by checking known-impure functions

  • refs - 验证引用的正确使用，渲染过程中是否进行读写操作

    ¥refs - Validates correct usage of refs, not reading/writing during render

  • set-state-in-effect - 验证是否在副作用中同步调用 setState

    ¥set-state-in-effect - Validates against calling setState synchronously in an effect

  • set-state-in-render - 验证是否在渲染过程中设置 state。

    ¥set-state-in-render - Validates against setting state during render

  • static-components - 验证组件是否为静态，而不是每次渲染都重新创建。

    ¥static-components - Validates that components are static, not recreated every render

  • unsupported-syntax - 验证是否在 React Compiler 不支持的语法。

    ¥unsupported-syntax - Validates against syntax that React Compiler does not support

  • use-memo - 验证 useMemo 钩子的使用情况，无需返回值

    ¥use-memo - Validates usage of the useMemo hook without a return value

下一章exhaustive-deps