为何在非函数组件中用Hook，react-hooks/rules-of-hooks未报错？

首先明确几个核心要点：

• React Hooks的规则要求只能在React函数组件或自定义Hook的最顶层调用，这包含运行时的React检查和ESLint的静态检查两层逻辑。
• react-hooks/rules-of-hooks插件依赖静态分析识别合法的Hook调用上下文，它的判定规则是：
  • 首字母大写且返回JSX的函数，会被判定为React组件
  • 名称以use开头的函数，会被判定为自定义Hook

针对你的代码：

export const ClaimMonitorStore = (unifiedOnboardingStatus: TUnifiedOnboardingStatusStore) => ({
    claimMonitorsStatus: RenderingStatus.Ready,
    claimMonitorsErrMsg: "",
    searchText: "",
    alias: useAlias(),
})

1. ESLint未触发检查的原因：ClaimMonitorStore首字母大写但返回的是普通对象而非JSX，ESLint不会将它判定为React组件；同时它的名称不以use开头，也不会被识别为自定义Hook。因此ESLint的规则不会对这个函数内部的Hook调用进行校验。
2. 运行时是否报错的关键：
   • 如果ClaimMonitorStore是在某个React函数组件或自定义Hook的最顶层被调用，那么useAlias()的调用实际处于合法的Hook调用栈中，运行时React不会报错。
   • 如果ClaimMonitorStore是在非组件/非Hook的上下文（比如普通工具函数、类方法）中被调用，运行时React会抛出"Invalid hook call"的错误，但ESLint依然无法提前检测到这个问题。

本质上是ESLint的静态检查存在局限性，它只能通过函数的命名和返回值类型推断是否为Hook的合法调用场景，而你的ClaimMonitorStore刚好不在它的判定范围内，因此没有触发错误。

内容的提问来源于stack exchange，提问作者wei wang