React设置加载状态的最佳方式：实现数据加载完成后统一渲染

你当前固定3秒延迟的写法属于硬编码逻辑，无法适配实际数据加载的耗时差异，要实现加载状态持续到所有数据请求完成后再渲染内容，有两种成熟的可用方案：

方案1：合并组件懒加载与数据请求的Promise（适配Suspense原生逻辑） #

React.lazy本身接受返回Promise的函数，你可以用Promise.all将组件加载、数据请求两个异步任务合并，等待所有任务完成后再resolve组件，这样Suspense的fallback加载态会自动持续到所有资源就绪：

// 封装你的数据请求逻辑，示例为请求列表接口
const fetchListData = () => fetch('/api/list').then(res => res.json())

const LazyComponent = React.lazy(async () => {
  // 并行执行组件加载、数据请求
  const [componentRes, listData] = await Promise.all([
    import("../Components/ListContainer"),
    fetchListData()
  ])
  // 预请求的数据可以注入到组件默认props，也可以存入redux/zustand等全局状态
  componentRes.default.preloadedListData = listData
  return componentRes
});

function Home() {
  return (
    <Suspense fallback={<Loading />}>
      <LazyComponent />
    </Suspense>
  );
}

该方案无需修改现有Suspense结构，不会出现组件先渲染、数据后加载的视觉闪动问题。

方案2：自定义加载状态控制（适配复杂业务逻辑场景） #

如果你的数据请求逻辑本身封装在ListContainer内部，不想和懒加载逻辑耦合，可以停用Suspense的fallback，自行控制加载状态的展示：

// 懒加载逻辑无需额外处理
const LazyComponent = React.lazy(() => import("../Components/ListContainer"))

function Home() {
  const [isAllResourceReady, setIsAllResourceReady] = useState(false)

  // 数据请求完成后由子组件触发该回调
  const handleResourceReady = () => {
    setIsAllResourceReady(true)
  }

  return (
    <>
      {/* 资源未就绪时统一展示加载态 */}
      {!isAllResourceReady && <Loading />}
      <Suspense fallback={null}>
        {/* 所有资源就绪后再渲染组件 */}
        {isAllResourceReady && <LazyComponent onDataLoaded={handleResourceReady} />}
      </Suspense>
    </>
  )
}

如果使用React 18及以上版本，也可以配合use Hook在组件内直接消费Promise，原生支持Suspense for Data Fetching特性，无需额外封装。

• 优先用骨架屏替代纯文字/动画Loading，降低用户等待的感知时长
• 可以加最小加载时长兜底：在Promise.all中加入一个300ms的延迟Promise，避免请求速度过快导致加载态一闪而过的突兀感
• 加载时长超过8s时建议增加重试按钮、进度提示，避免用户误以为页面卡死

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