Preact中useMemo钩子在渲染期间状态更新时的异常行为分析

问题背景

在Preact 10.21.0版本中，开发者发现了一个关于useMemo钩子的特殊行为：当在渲染过程中基于useMemo的计算结果进行状态更新时，会导致组件无限重新渲染。这一现象与React中的行为表现不一致，引起了开发者社区的关注。

问题现象

具体表现为以下代码模式会导致无限循环：

const [value, setValue] = useState(false);

const data = useMemo(() => {
  return { data: 'some data' };
}, [value]);

const [prevData, setPreviousData] = useState(data);

if (prevData !== data) {
  setPreviousData(data); // 这会导致无限循环
}

在这个例子中，虽然value状态没有变化，但useMemo却不断重新计算，导致prevData与data的比较总是返回true，从而触发setPreviousData调用，进而引发无限重新渲染。

技术原理分析

Preact内部实现useMemo钩子时，使用了一个_pendingArgs机制来暂存依赖项数组。这个机制原本是为了处理某些特殊情况下的状态更新，但在当前场景下却导致了意外行为。

核心问题在于：

1. useMemo的依赖项比较没有在渲染过程中即时更新
2. 当在渲染过程中触发状态更新时，Preact没有正确处理依赖项的缓存
3. 导致每次渲染时useMemo都认为依赖项发生了变化，从而重新计算值

与React的差异

在React中，相同的代码模式能够正常工作，useMemo会正确记住依赖项，不会在value未变化时重新计算。React的实现更加直接，没有使用类似_pendingArgs的中间状态，而是直接在渲染过程中完成依赖项的比较和记忆。

解决方案探讨

从技术实现角度来看，可能的解决方案包括：

1. 完全移除useMemo实现中的_pendingArgs相关逻辑，使其行为更接近React
2. 改进依赖项比较时机，确保在渲染过程中正确捕获依赖项变化
3. 增加对渲染期间状态更新的特殊处理，避免无限循环

经过深入分析，第一种方案可能是最直接有效的，因为：

• 简化了实现逻辑
• 与React行为保持一致
• 解决了当前的问题场景
• 不会引入新的边界情况

对开发者的建议

在实际开发中，开发者可以采取以下临时解决方案：

1. 避免在渲染过程中基于useMemo结果直接设置状态
2. 使用useEffect来处理这类状态更新逻辑
3. 或者将状态比较和更新逻辑移到事件处理函数中

例如，可以改写为：

useEffect(() => {
  if (prevData !== data) {
    setPreviousData(data);
  }
}, [data, prevData]);

总结

Preact中useMemo的这一行为差异揭示了框架实现细节对开发者体验的影响。虽然这类边界情况不常见，但理解其背后的原理有助于开发者编写更健壮的代码。框架开发团队已经意识到这一问题，并考虑通过简化实现来提供更符合预期的行为。