React报错Hook被条件调用：需保证组件每次渲染Hook调用顺序一致

在自定义Hook中添加if条件判断逻辑时触发React Hooks规则报错，报错信息如下：

React Hook "" is called conditionally. React Hooks must be called in the exact same order in every component render 

经排查确认，报错根源是将Hook调用放在了if条件判断块内：移除if判断、直接调用Hook时代码可正常运行，直接调用示例代码如下：

const [formState, formAction] = useDataForm(initData, submitCallback);

实际实现需求：仅当dataValid状态为不合法且已填充时，才执行自定义Hook useDataForm的逻辑。

React Hooks有强制调用规则：所有Hook必须在组件、自定义Hook的顶层作用域调用，不能放在条件判断、循环、嵌套函数内部。
React是靠每次渲染时Hook的固定调用顺序，来关联内部存储的状态和对应Hook的。如果把Hook放在条件块里，一旦条件判断结果在不同渲染轮次发生变化，Hook的调用数量、顺序就会出现偏差，React无法正确匹配状态，因此直接抛出规则校验错误。

绝对不能把useDataForm的Hook调用本身放在if条件块中，要把条件判断逻辑下沉，有两种成熟实现方式：

方案1：给自定义Hook增加enabled开关参数（官方推荐写法） #

这是条件执行Hook逻辑的标准方案，给useDataForm新增一个布尔类型的启用开关入参，Hook本身始终在顶层调用，仅在开关为true时执行内部核心逻辑：

• 组件侧始终在顶层调用Hook，把判断条件作为开关传入：

// 顶层无条件调用Hook，传入执行条件
const [formState, formAction] = useDataForm(initData, submitCallback, {
  enabled: !dataValid.isValid && dataValid.isFilled
});

• 修改useDataForm内部实现，所有副作用、状态更新、暴露方法的逻辑都加上开关判断：

const useDataForm = (initData, submitCallback, options = {}) => {
  // 默认开启，兼容原有无开关的调用场景
  const { enabled = true } = options;
  const [formState, setFormState] = useState(initData);

  // 副作用逻辑加开关拦截
  useEffect(() => {
    if (!enabled) return;
    // 原有表单初始化、事件绑定、校验关联等核心逻辑
    bindFormEvents();
    syncInitData(initData);
  }, [enabled, initData]);

  // 暴露的操作方法内部加开关拦截
  const triggerSubmit = useCallback(() => {
    if (!enabled) return;
    // 原有提交逻辑
    submitCallback(formState);
  }, [enabled, formState, submitCallback]);

  return [formState, { triggerSubmit }];
}

方案2：抽离纯逻辑为普通函数做条件调用 #

如果useDataForm中部分逻辑不依赖React Hook能力（比如不涉及useState、useEffect等Hook调用，只是普通的数据处理、表单配置逻辑），可以把这部分纯逻辑抽离为独立的普通工具函数，普通函数不受Hooks规则限制，可以直接放在if条件块中按需调用。

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