React中条件调用Hook是否合规？自定义useMainHook写法有效吗？

React的Hook规则核心不只是调用数量一致，更关键的是每次渲染时Hook的调用顺序必须完全稳定——组件每次渲染，Hook的调用顺序都得和第一次渲染完全一致，React靠这个顺序来对应每个Hook的内部状态。

看你写的这段代码：

function useMainHook({ isLive }) {
  const res = isLive ? useHookA() : useHookB();
  return res;  // Make sure to return the result
}

当isLive的值在不同渲染周期里变化时，调用的Hook会在useHookA和useHookB之间切换，这直接破坏了调用顺序的稳定性。React无法正确匹配状态与Hook的对应关系，必然会引发各种难以定位的Bug。

哪怕每次只调用1个Hook，只要调用的Hook类型随条件变化，就违反了Hook规则。正确的写法应该是先按固定顺序调用所有需要的Hook，再根据条件选择返回结果：

function useMainHook({ isLive }) {
  const resA = useHookA();
  const resB = useHookB();
  return isLive ? resA : resB;
}

内容的提问来源于stack exchange，提问作者Obay Abd-Algader