为什么React项目中以use开头的普通函数会触发Hook相关报错？

触发报错的原因 #

React的Hook使用规则校验由官方配套的eslint-plugin-react-hooks插件实现，该插件的判断逻辑完全基于命名约定：所有以use开头的驼峰式命名函数，都会被默认判定为React Hook，不会额外做语义分析判断函数的实际用途。
这个设计的初衷是为了统一自定义Hook的命名规范，方便通用校验Hook的使用限制（只能在React组件/其他自定义Hook的顶层调用），所以你的工具函数use20PercentCupom刚好符合命名匹配规则，在顶层调用时就触发了报错。

可选的处理方案 #

• 首选方案：调整函数命名，避免use开头的驼峰格式，比如改成get20PercentCupom、apply20PercentCupom，改造成本最低，也不会和React的命名规范产生冲突，避免后续维护时其他人混淆函数用途。
• 如果确实需要保留现有命名，可以局部禁用对应ESLint规则：
  针对单行报错，在调用行上方添加注释即可：

  // eslint-disable-next-line react-hooks/rules-of-hooks
  console.log(use20PercentCupom(prices))
  

  如果整个文件都不涉及React组件/Hook开发，可以在文件顶部添加全局禁用注释：

  /* eslint-disable react-hooks/rules-of-hooks */
  

• 不推荐全局禁用该规则，否则项目内真的React Hook使用错误时也不会触发校验，容易引入运行时bug。

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