自定义React Hook异步渲染ReactNode时无限循环问题求助

你的代码出现无限循环的核心原因很直接：useEffect没有设置依赖数组，这会导致每次组件渲染（包括调用set_most_recent_slow_component更新状态后）都会重新执行这个useEffect，而useEffect里又会触发computeInBG，最终调用set_most_recent_slow_component引发组件再次渲染，往复形成循环。

具体修复步骤 #

1. 给useEffect添加依赖数组

首先要限制useEffect的执行时机，只在组件挂载时执行一次（或当特定依赖变化时执行）：

useEffect(() => {
  console.log('USE EFFECT');
  computeInBG(slowComponent);
}, []); // 空数组表示仅在组件挂载时执行一次

2. 稳定内部函数的引用

由于slowComponent定义在组件内部，每次渲染都会生成新的函数引用，React的lint规则会提示依赖缺失。可以用useCallback包裹它，确保引用稳定：

const slowComponent = useCallback(async () => {
  let i = 0;
  while (i < 1000000000) i++; // 模拟耗时计算
  return <div>This component takes some time to load!</div>;
}, []); // 无依赖时用空数组，依赖组件状态/Props时添加对应项

此时useEffect的依赖数组可以加上slowComponent，既能消除lint警告，又能保证逻辑正确性：

useEffect(() => {
  console.log('USE EFFECT');
  computeInBG(slowComponent);
}, [slowComponent]);

3. 优化异步任务的最新结果判断（可选但推荐）

你的ref逻辑已经在处理"只保留最新任务"，但可以进一步优化，避免过时的异步结果更新状态：

const computeInBG = useCallback(async (slowComponent: () => Promise<React.ReactNode>) => {
  ref.current.todoSlowComponent = slowComponent;
  if (ref.current.isComputing) return;

  ref.current.isComputing = true;
  const currentTask = ref.current.todoSlowComponent;
  ref.current.todoSlowComponent = null;
  
  const awaitedComponent = await currentTask();

  // 检查是否有新任务等待，有则跳过当前结果更新
  ref.current.isComputing = false;
  if (ref.current.todoSlowComponent) {
    computeInBG(ref.current.todoSlowComponent);
    return;
  }

  set_most_recent_slow_component(awaitedComponent);
}, []);

其他注意点 #

• useState的setter函数（set_most_recent_slow_component）是稳定的，不需要加入依赖数组；
• useRef的current属性变化不会触发组件渲染，所以可以安全地在异步逻辑中修改和读取。

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