使用React Suspense导致无限重渲染循环问题求助

为什么会触发无限重渲染？ #

1. 渲染阶段的副作用导致循环：你在组件渲染过程中直接调用setGeneral更新全局状态，违反了React渲染阶段必须是纯函数的规则。状态更新会触发组件重新渲染，而重渲染时data?.general还未同步更新（当前渲染周期内data仍是旧值），于是再次进入if (id && !data?.general)分支，重复执行use(getCached(id))和setGeneral，形成无限循环。
2. use()的执行逻辑：当getCached(id)返回的Promise处于pending状态时，React会暂停组件渲染；但当Promise resolve后，组件继续执行并调用setGeneral，触发重渲染。此时缓存的Promise已经resolved，use()会直接返回数据，再次触发setGeneral，循环往复。

符合Suspense要求的解决方案 #

方案1：添加数据对比，避免重复更新状态

在调用setGeneral前，对比新数据与现有状态，只有当数据确实变化时才更新，切断循环链：

// Cache the data fetching function
const getCached = cache(async (id: string) => {
  return await getData(id, ['general']);
});

// Data fetching component
function GeneralFormData() {
  const { id, data, setGeneral } = useStore();

  if (id && !data?.general) {
    const d = use(getCached(id));
    // 用浅/深比较判断数据是否变化，示例用JSON.stringify（实际项目建议用lodash.isEqual等工具）
    if (d.general && JSON.stringify(d.general) !== JSON.stringify(data?.general)) {
      setGeneral(d.general as Partial<General>);
    }
  }

  return null;
}

方案2：将状态更新移至副作用阶段

利用useEffect处理状态更新，确保副作用只在数据或依赖变化时执行，避免渲染阶段触发重渲染：

// Cache the data fetching function
const getCached = cache(async (id: string) => {
  return await getData(id, ['general']);
});

// Data fetching component
function GeneralFormData() {
  const { id, data, setGeneral } = useStore();
  let fetchedData;

  // 渲染阶段仅获取缓存数据，不做状态更新
  if (id && !data?.general) {
    fetchedData = use(getCached(id));
  }

  // 副作用阶段处理状态更新
  useEffect(() => {
    if (fetchedData?.general && fetchedData.general !== data?.general) {
      setGeneral(fetchedData.general as Partial<General>);
    }
  }, [fetchedData, data?.general, setGeneral]);

  return null;
}

方案3：拆分组件职责（更符合Suspense设计理念）

让数据获取组件专注于读取缓存数据，将状态更新逻辑交给父组件，避免在渲染阶段产生副作用：

// 父组件（包裹Suspense）
function ParentComponent() {
  const { id, setGeneral } = useStore();
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <GeneralDataFetcher id={id} onDataLoaded={setGeneral} />
    </Suspense>
  );
}

// 数据获取组件
const getCached = cache(async (id: string) => {
  return await getData(id, ['general']);
});

function GeneralDataFetcher({ id, onDataLoaded }: { id: string; onDataLoaded: (data: Partial<General>) => void }) {
  const d = use(getCached(id));
  
  useEffect(() => {
    if (d.general) {
      onDataLoaded(d.general as Partial<General>);
    }
  }, [d, onDataLoaded]);

  return null;
}

关于React Suspense与cache的注意点 #

• React的cache函数会缓存相同参数的异步调用结果，确保同一id的请求只会发起一次，这是Suspense正常工作的前提。
• 渲染阶段必须保持纯函数，任何状态更新、数据修改等副作用都应该放在useEffect或其他副作用钩子中执行，否则必然引发不可预测的重渲染问题。

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