前端进阶之旅前端进阶之旅
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
首页程序员面试题库eslint-plugin-react-hooks exhaustive-deps 规则
ReReactHooks 与复用

eslint-plugin-react-hooks 能发现哪些错误,规则应该怎么配置?

这两条基础规则分别回答“Hook 调用结构是否合法”和“同步逻辑是否遗漏输入”,不能互相替代。

前端进阶之旅 · 一题精讲更新于 2026.09.06
React#Hooks 与复用#Effect
先看核心答案读代码示例
理解线索

把诊断映射到不同修复动作

  1. 调用结构条件调用普通 Hook 时,移动条件逻辑或拆分子组件
  2. 响应式依赖回调遗漏输入时,补全依赖或重构同步职责
  3. 推荐预设新增规则依赖插件版本,应核对安装版本和迁移影响

下例按 ESLint 9 flat config 展示两条基础规则。本文核对的插件版本为 7.0.1,其 recommended 还包含其他诊断。

核心回答

先记住这个答案

rules-of-hooks 检查普通 Hook 是否位于合法组件或自定义 Hook 中,以及是否破坏稳定调用顺序;exhaustive-deps 检查 Effect、memo 等 Hook 回调使用的响应式值是否被依赖数组覆盖,并提示部分不稳定依赖。较新的插件推荐配置还包含渲染纯度、ref 使用和编译器相关诊断,不能把整个插件等同于两条老规则。静态检查帮助发现结构问题,但无法证明订阅清理、竞态和业务行为全部正确。

  • 调用规则与依赖完整性是两类检查
  • 基础规则示例不等于完整 recommended 预设
  • 修复同步结构优先于无理由关闭警告

先确认实际启用的规则和文件范围

安装插件并不等于规则已经运行。需要确认配置命中了实际文件扩展名、解析器能读取语法,并检查编辑器与命令行是否使用相同工作目录和配置。否则没有诊断可能只是文件被忽略。

下面的配置只启用两条基础规则并面向 JavaScript 与 JSX。配置可以保存为 eslint.config.mjs;TypeScript 项目应在现有解析器配置上组合规则,而不是把此示例当作包含所有语言支持的完整项目配置。

ESLint 9 的基础 flat configTypeScript
import reactHooks from 'eslint-plugin-react-hooks';

export default [
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      parserOptions: { ecmaFeatures: { jsx: true } }
    },
    plugins: { 'react-hooks': reactHooks },
    rules: {
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn'
    }
  }
];

代码展示的是基础启用方式,语法同时适用于模块配置文件。是否把依赖警告视为阻断项由团队检查命令决定;持续集成需要失败时,可配合最大警告数限制,而不只是依赖默认退出码。

根据诊断修复语义,避免只消掉红线

条件分支中调用 useEffect,应把 Hook 留在顶层,再在其回调内部判断是否需要同步,或将分支拆成独立组件。React 的 use API 有特殊调用规则,不能把普通 Hook 的顺序限制不加区分地套到所有名字上。

依赖警告要求理解回调读取了什么:订阅房间读取 roomId,就应跟随房间变化并清理旧订阅。如果加上函数依赖后不断重跑,应考虑把函数放入 Effect、稳定必要接口或拆分职责,而不是习惯性删掉依赖。

推荐预设的覆盖与静态分析边界

在本文核对的插件版本中,推荐预设除了两条基础规则,还包含 refs、purity、immutability 等诊断以及编译器相关检查。项目升级插件时,应阅读实际预设并审阅新增提示,不能假设规则集合永远不变。

自定义 Effect Hook 可以按插件支持的设置扩展依赖检查,但正则应准确限定真正具有 Effect 语义的接口。即使所有静态检查通过,仍需验证卸载清理、输入快速切换和异步结果晚到,规则不会执行这些业务路径。

回答前,多想一步

容易答错的地方

把 exhaustive-deps 理解成必须加所有变量
规则关注回调使用的响应式值以及它们的稳定性,不是要求把文件里出现的名字都塞进数组。修复时应确认读取关系,并保留编译期可分析的依赖写法,过量或错误依赖也会制造无意义同步。
遇到提示就添加整文件禁用注释
整文件禁用会掩盖以后新增的真实错误。应先理解同步目标和调用结构;确实有特定接口不被分析器理解时,限定禁用范围并说明不变量,同时用实际行为验证支撑,而不是让警告静默消失。
试着用自己的话回答

面试官还会怎么问?

只有 warning,持续集成一定会失败吗?

不一定。ESLint 的普通警告通常不会像错误一样自动导致失败,团队可以通过最大警告数选项等方式收紧门禁。应检查实际命令和退出码,不能把编辑器黄色提示等同于已经阻止合并。

这个插件能自动证明 Effect 不会泄漏吗?

不能。它能提示调用结构和依赖等问题,但外部资源是否一一释放、异步取消是否有效,需要运行和业务测试。尤其要检查重新订阅、卸载及旧结果返回,不能把零警告当作完整正确性证明。

使用推荐预设就等于启用了 React Compiler 吗?

不是。插件可以报告与编译器有关的诊断,但真正编译优化还需要构建流程启用 React Compiler。规则检查和编译转换是不同环节,应分别核对配置与产物,避免误判项目已经获得自动缓存。

从一道题,走向一组知识

把知识连起来

副作用与同步

useEffect 为什么必须声明读到的响应式依赖,漏写会怎样?

用具体订阅问题理解依赖完整性和同步职责。

Hooks 与复用

为什么 React 的 Hooks 必须在每次渲染中以完全相同的顺序调用,不能放进条件或循环里?

深入理解普通 Hook 调用位置、顺序和特殊 API。

性能与并发

useMemo 的缓存和依赖数组是如何工作的?

在计算缓存中核对完整依赖与不可变输入。

参考资料

  • React 官方:eslint-plugin-react-hooks
  • React 官方:exhaustive-deps
  • ESLint 官方:配置文件

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 先确认实际启用的规则和文件范围
  3. 根据诊断修复语义,避免只消掉红线
  4. 推荐预设的覆盖与静态分析边界
  5. 容易答错的地方
  6. 面试官还会怎么问
  7. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑