重命名第三方库中自定义React Hook（如Zustand的useStore）以规避Hook条件调用规则是否可行？

首先得明确：React Hook的规则不是靠函数命名来约束的，ESLint的react-hooks/rules-of-hooks规则只是通过「以use开头」这个命名约定来帮你检测是否违反规则，但规则的本质是React内部的状态管理机制完全依赖Hook的调用顺序一致性。

你重命名useStore为getStore后，ESLint认不出这是个Hook，所以不报错，但这只是「骗过了检测工具」，并没有解决实际问题——你依然在条件语句里调用了一个React Hook，这会破坏React追踪状态的逻辑。

为什么这很危险？ #

React在渲染组件时，会按照Hook的调用顺序来关联对应的状态（比如useState的第N次调用对应第N个状态）。如果在条件语句里调用Hook，当someBoolean在不同渲染周期中变化时，Hook的调用顺序就会改变：

• 当someBoolean为true时，你调用了getStore（本质是useStore）
• 当someBoolean为false时，你跳过了这个调用

这种情况下，React无法正确匹配Hook的状态，后续可能出现各种诡异的bug：比如状态不更新、渲染结果异常，甚至组件崩溃，而且这类bug很难调试，因为表面上看起来代码逻辑没问题。

正确的做法 #

你应该始终在组件的顶层作用域调用所有Hook，然后再根据条件处理返回的值。针对你的场景，正确的写法是：

import { useStore } from '../zustandModule';
export default function App({ someBoolean }) {
  // 顶层调用Hook，保证每次渲染顺序一致
  const bears = useStore((state) => state.bears);
  // 之后再处理条件逻辑
  const count = someBoolean ? bears : 1;
  return <div>count: {count}</div>
}

如果担心选择器导致不必要的重渲染，你可以利用Zustand的优化特性，比如给useStore传递依赖数组：

const bears = useStore((state) => state.bears, []);

或者使用Zustand提供的其他性能优化方案，但核心原则不变：Hook必须在组件顶层调用，不能放在条件、循环或嵌套函数里。

总结 #

不管你给Hook起什么名字，它的本质还是React Hook，必须遵守Hook的规则。绕过ESLint检测只是自欺欺人，会给后续的代码维护埋下巨大隐患。遵守规则，在顶层调用Hook，才是正确的做法。

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