如何避免React Suspense fallback在状态更新时重复触发？

核心问题是每次父组件重渲染时，AvatarIcon的异步函数会重新执行getAvatarIcon，导致Suspense再次进入等待状态。要解决这个问题，关键是缓存API请求结果，确保相同id的请求只发起一次，后续直接复用缓存数据。

方案一：使用React.cache（React 18+推荐） #

React 18提供的React.cache API可以缓存函数的调用结果，相同参数的调用会直接返回缓存的Promise，不会重复发起请求。

改造代码如下：

import { cache } from 'react';
import { getAvatarIcon } from './your-api-module';

// 用React.cache包裹请求函数，实现缓存
const getCachedAvatarIcon = cache(getAvatarIcon);

export async function AvatarIcon({ id }: { id: string }) {
  // 调用缓存后的函数，相同id只会请求一次
  const avatarIcon = await getCachedAvatarIcon(id);

  return (
    <div className="">
      <Image
        src={`data:image/png;base64, ${avatarIcon}`}
        height={40}
        width={40}
        className="relative z-0 h-full w-16"
        alt="Avatar Icon"
      ></Image>
    </div>
  )
}

只要id不变，父组件重渲染时getCachedAvatarIcon会直接返回缓存结果，不会触发Suspense的fallback；只有首次渲染或id变化时才会进入等待状态。

方案二：手动维护缓存（兼容低版本React） #

如果项目没升级到React 18，可以用useRef维护一个缓存Map，结合useEffect控制请求逻辑：

import { useState, useEffect, useRef } from 'react';
import { getAvatarIcon } from './your-api-module';

export function AvatarIcon({ id }: { id: string }) {
  const [avatarIcon, setAvatarIcon] = useState<string | null>(null);
  // 用useRef存储全局缓存，避免组件重渲染时重置
  const cacheRef = useRef<Map<string, string>>(new Map());

  useEffect(() => {
    async function fetchAvatar() {
      // 先检查缓存，有数据直接使用
      if (cacheRef.current.has(id)) {
        setAvatarIcon(cacheRef.current.get(id)!);
        return;
      }
      // 无缓存则发起请求，并存入缓存
      const iconData = await getAvatarIcon(id);
      cacheRef.current.set(id, iconData);
      setAvatarIcon(iconData);
    }

    // 只有当没有缓存数据时才发起请求
    if (!avatarIcon) {
      fetchAvatar();
    }
  }, [id, avatarIcon]);

  // 首次加载或id变化时显示fallback（和Suspense的fallback保持一致即可）
  if (!avatarIcon) {
    return <div></div>;
  }

  return (
    <div className="">
      <Image
        src={`data:image/png;base64, ${avatarIcon}`}
        height={40}
        width={40}
        className="relative z-0 h-full w-16"
        alt="Avatar Icon"
      ></Image>
    </div>
  )
}

这种方式下，父组件重渲染时只要id不变，useEffect不会重复执行请求逻辑，组件直接渲染缓存的图片，不会触发Suspense的fallback。

注意事项 #

• 确保缓存的Key是唯一标识（这里用id），避免不同用户的头像数据混淆。
• 如果头像数据可能更新，可以给缓存增加过期逻辑，或者提供手动刷新的方法。

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