条件性使用自定义React Hook是否合法？存在哪些潜在问题？

核心结论 #

这种写法违反了React Hook的官方规则，尽管当前运行无警告，但其存在潜在的状态异常、副作用执行错误等问题，并非合法的Hook使用方式。

Hook规则的核心要求 #

React Hook的核心规则是：Hook必须在组件的顶层作用域调用，且每次渲染的调用顺序必须完全一致。React依赖Hook的调用顺序来追踪每个Hook对应的状态和副作用，一旦调用顺序在渲染间发生变化，React就无法正确关联状态，进而引发各种不可预期的问题。

你的写法中，根据variant条件选择调用useJohn或useJane，本质上是在条件分支中调用不同的Hook，破坏了调用顺序的一致性，属于规则禁止的场景。

潜在的问题 #

• 状态追踪混乱：如果variant在组件生命周期中发生变化（比如从'John'切换到'Jane'），React会将新Hook的状态与旧Hook的状态位置绑定，导致状态完全错乱。例如，useJane的状态会被错误关联到之前useJohn的状态存储位置。
• 副作用执行异常：若自定义Hook内部包含useEffect、useCallback等副作用逻辑，条件切换Hook会导致旧Hook的副作用无法被正确清理，新Hook的副作用执行时机错误，引发内存泄漏或重复请求等问题。
• 版本兼容性风险：当前React的lint规则或运行时可能未检测到这种违规，但未来版本的React可能会加强检查，导致代码直接报错，或出现更严重的行为异常。

正确的实现方式 #

方式1：顶层调用所有Hook，根据条件选择结果 #

同时在组件顶层调用两个Hook，再根据variant选择使用对应的数据：

const useJohn = () => {
  // fetch & parse some data
  return { parsedData: { date: new Date(), name: 'John Doe' } }
}
const useJane = () => {
  // fetch & parse some data
  return { parsedData: { date: new Date(), name: 'Jane Smith' } }
}
const DataDisplay = ({ variant }: { variant: 'John' | 'Jane' }) => {
  const johnResult = useJohn();
  const janeResult = useJane();
  const { parsedData } = variant === 'John' ? johnResult : janeResult;
  return <div>{`${parsedData.date.toString()} ${parsedData.name}`}</div>;
}

如果Hook内部有网络请求等开销，可以在Hook内部添加条件判断，只有当对应的数据被需要时才执行请求逻辑。

方式2：封装统一的顶层Hook #

将条件判断逻辑封装到一个新的自定义Hook中，保证组件始终在顶层调用同一个Hook：

const useJohn = () => {
  // fetch & parse some data
  return { parsedData: { date: new Date(), name: 'John Doe' } }
}
const useJane = () => {
  // fetch & parse some data
  return { parsedData: { date: new Date(), name: 'Jane Smith' } }
}
const usePersonData = (variant: 'John' | 'Jane') => {
  switch(variant) {
    case 'John':
      return useJohn();
    case 'Jane':
      return useJane();
    default:
      throw new Error('Invalid variant');
  }
}
const DataDisplay = ({ variant }: { variant: 'John' | 'Jane' }) => {
  const { parsedData } = usePersonData(variant);
  return <div>{`${parsedData.date.toString()} ${parsedData.name}`}</div>;
}

这种写法完全符合Hook规则：组件始终在顶层调用usePersonData，调用顺序保持一致，条件判断仅发生在Hook内部，不会影响React的状态追踪逻辑。

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