用途:在遇到 React Hook 相关报错、无限重渲染循环、状态过期或 eslint-plugin-react-hooks 告警时,用于快速定位原因并给出修复方向。
主要能力:提供错误诊断表,按症状列出成因与修复方式,涵盖 Hook 调用顺序变化、Invalid hook call、Too many re-renders、useEffect 无限循环、setTimeout/setInterval 与事件监听中的过期闭包、卸载后更新状态告警、exhaustive-deps 告警、条件调用 Hook、类组件中调用 Hook、开发环境 Effect 触发两次、useFormStatus 始终返回 pending: false 等。
核心规则:Hook 只能在顶层调用,不可放在条件、循环、嵌套函数、try/catch、条件 return 之后或事件处理函数中;只能从函数组件或自定义 Hook 调用。例外是 React 19 的 use() 可在条件与循环中调用。
常见修复模式:把 setState 移入事件处理或 useEffect;为 useEffect 补依赖数组;把对象创建移入 Effect 或用 useMemo;用函数式更新 setState(prev => ...) 或 useRef 解决过期闭包;Effect 返回清理函数,异步请求用 ignore 标志避免竞态;定时器保存 ID 并在清理时清除。
Effect 时机:useInsertionEffect 在 DOM 变更前、阻塞绘制,仅用于 CSS-in-JS;useLayoutEffect 在 DOM 变更后、绘制前、阻塞绘制,用于 DOM 测量;useEffect 在绘制后、不阻塞,用于数据获取与订阅。
exhaustive-deps:默认应修复依赖;仅在依赖为稳定引用(setState、dispatch、ref)或确实只需挂载时运行等少数情况可省略。
限制:资料未提供安装命令、版本要求、收费方式与平台信息;内容为排查指南,不替代官方文档。参考链接包括 react.dev 的 Rules of Hooks、useEffect、useState、You Might Not Need an Effect、Synchronizing with Effects、Removing Effect Dependencies。